Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create and apply CSS to JavaScript Alert box?
The standard alert box in JavaScript does not provide the option to apply CSS. To style your alert box, you need to create a custom one first. The custom alert box will be created using jQuery and styles will be applied to CSS.
Why Custom Alert Boxes?
JavaScript's built-in alert() function creates browser-native dialogs that cannot be styled. Custom alert boxes give you complete control over appearance, animations, and user experience.
Example
You can try to run the following code to learn how to create and apply CSS to alert box:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function functionAlert(msg, myYes) {
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes").unbind().click(function() {
confirmBox.hide();
});
confirmBox.find(".yes").click(myYes);
confirmBox.show();
}
</script>
<style>
#confirm {
display: none;
background-color: #F3F5F6;
color: #000000;
border: 1px solid #aaa;
position: fixed;
width: 300px;
height: 100px;
left: 40%;
top: 40%;
box-sizing: border-box;
text-align: center;
}
#confirm button {
background-color: #FFFFFF;
display: inline-block;
border-radius: 12px;
border: 4px solid #aaa;
padding: 5px;
text-align: center;
width: 60px;
cursor: pointer;
}
#confirm .message {
text-align: left;
}
</style>
</head>
<body>
<div id="confirm">
<div class="message">This is a warning message.</div><br>
<button class="yes">OK</button>
</div>
<input type="button" value="Click Me" onclick="functionAlert('Custom Alert Message!');" />
</body>
</html>
How It Works
The custom alert consists of three main parts:
-
HTML Structure: A hidden
divelement that serves as the alert container - CSS Styling: Styles that position the alert and make it visually appealing
- JavaScript Function: Controls showing/hiding the alert and handles button clicks
Key Features
-
Positioning: Uses
position: fixedto center the alert on screen - Customizable Styling: Background colors, borders, and button styles can be modified
- Dynamic Content: Message text can be changed programmatically
- Event Handling: Button clicks are handled with jQuery event listeners
Alternative: Pure JavaScript Version
Here's a version without jQuery dependency:
<!DOCTYPE html>
<html>
<head>
<style>
#customAlert {
display: none;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border: 2px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
min-width: 250px;
text-align: center;
}
#customAlert button {
margin-top: 15px;
padding: 8px 16px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="customAlert">
<div id="alertMessage"></div>
<button onclick="closeAlert()">OK</button>
</div>
<button onclick="showAlert('This is a custom styled alert!')">Show Alert</button>
<script>
function showAlert(message) {
document.getElementById('alertMessage').textContent = message;
document.getElementById('customAlert').style.display = 'block';
}
function closeAlert() {
document.getElementById('customAlert').style.display = 'none';
}
</script>
</body>
</html>
Conclusion
Custom alert boxes provide complete styling control that native JavaScript alerts cannot offer. Use jQuery or pure JavaScript to create alerts that match your website's design and enhance user experience.
8K+ Views
