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 I can replace a JavaScript alert pop up with a fancy alert box?
Creating a custom fancy alert box gives you complete control over the design and user experience. Instead of the basic browser alert, you can create styled modal dialogs using HTML, CSS, and JavaScript.
Using jQuery for Custom Alert
Here's a complete example that replaces the standard JavaScript alert with a custom-styled modal:
<!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: #91FF00;
border: 1px solid #aaa;
position: fixed;
width: 250px;
left: 50%;
margin-left: -100px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#confirm button {
background-color: #48E5DA;
display: inline-block;
border-radius: 5px;
border: 1px solid #aaa;
padding: 5px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirm .message {
text-align: left;
}
</style>
</head>
<body>
<div id="confirm">
<div class="message">This is a warning message.</div>
<button class="yes">OK</button>
</div>
<input type="button" value="Click Me" onclick="functionAlert('Custom Alert Box!', function(){});" />
</body>
</html>
Modern Vanilla JavaScript Alternative
For a library-free approach, here's a vanilla JavaScript solution:
<!DOCTYPE html>
<html>
<head>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.custom-alert {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
padding: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
text-align: center;
color: white;
min-width: 300px;
animation: slideIn 0.3s ease-out;
}
.alert-button {
background: #fff;
color: #333;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-top: 15px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.alert-button:hover {
background: #f0f0f0;
transform: translateY(-2px);
}
@keyframes slideIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
</style>
</head>
<body>
<script>
function showCustomAlert(message) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.innerHTML = `
<div class="custom-alert">
<p>${message}</p>
<button class="alert-button" onclick="this.parentElement.parentElement.remove()">OK</button>
</div>
`;
document.body.appendChild(overlay);
}
</script>
<button onclick="showCustomAlert('This is a fancy custom alert!')">Show Custom Alert</button>
</body>
</html>
Key Benefits
| Feature | Standard alert() | Custom Alert |
|---|---|---|
| Styling | Browser default | Fully customizable |
| Animations | None | CSS animations possible |
| User Experience | Blocks entire browser | Stays within page context |
Implementation Tips
When creating custom alerts, consider adding backdrop blur effects, responsive design for mobile devices, and escape key handling for better accessibility. You can also create different alert types (success, warning, error) with color-coded styling.
Conclusion
Custom alert boxes provide better user experience and brand consistency compared to standard browser alerts. Choose jQuery for quick implementation or vanilla JavaScript for lighter, dependency-free solutions.
1K+ Views
