|
JavaScript alert popups are simple and effective for displaying messages to users, but they lack customization and can be visually unappealing.
Below are the approaches to replace a JavaScript alert pop-up with a fancy alert box.
By overriding the alert functionIn this approach, we will override the default window.alert function with a custom implementation. We update the alert function that displays a modal dialogue box with fancy styling.
Example: The below code overrides the window.alert function to replace a JavaScript alert pop-up with a fancy alert box.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Alert Box</title>
</head>
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<h4>By overriding alert function</h4>
<button onclick="fancyAlert('Hey, I am a fancy alert box')">
Display Fancy Alert
</button>
</div>
<script src="script.js"></script>
<script>
function fancyAlert(msg) {
alert(msg)
}
</script>
</body>
</html>
// sript.js
window.alert = function (message) {
// Create modal container
let modal = document.createElement("div");
modal.className = "modal";
modal.id = "myModal";
modal.setAttribute("style",
"display: none; position: fixed; z-index: 1;left: 0; top: 0; width: 100 %; height: 100 %;overflow: auto; background - color: rgba(0, 0, 0, 0.4); ");
// Create modal content
let modalContent = document.createElement("div");
modalContent.className = "modal-content";
modalContent.setAttribute("style", "display: flex; flex - direction: column; align - items: center; background - color: #fefefe; margin: 15 % auto; padding: 10px; border: 1px solid #888; width: 30 %; ");
// Create message element
let messageElement = document.createElement("p");
messageElement.id = "alertText";
messageElement.textContent = message;
// Create close button inside modal content
let closeButtonElement = document.createElement("button");
closeButtonElement.textContent = "Ok";
closeButtonElement.setAttribute("style", "background-color: #2196F3; color: white; padding: 10px 20px; border: none; cursor: pointer; border - radius: 5px; align - self: flex - end; margin - top: 10px; ");
closeButtonElement.onclick = function () {
modal.style.display = "none";
};
// Append elements to modal content
modalContent.appendChild(messageElement);
modalContent.appendChild(closeButtonElement);
// Append modal content to modal container
modal.appendChild(modalContent);
// Append modal to document body
document.body.appendChild(modal);
// Display the modal
modal.style.display = "block";
};
Output
Using a SweetAlert LibraryIn this approach, we are using JavaScript to replace the standard window.alert function with a custom alert box created using SweetAlert javascript library.
Example: The below code uses SweetAlert library to replace a JavaScript alert pop up with a fancy alert box.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>SweetAlert Example</title>
<script src="
https://cdn.jsdelivr.net/npm/sweetalert2@10">
</script>
</head>
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<h4>By overriding alert function</h4>
<button onclick="showSweetAlert()">
Show Alert
</button>
</div>
<!-- JavaScript to show the SweetAlert alert -->
<script>
function showSweetAlert() {
// Hide the default alert
window.alert = function () { };
// Use SweetAlert to display an alert
Swal.fire({
title: 'Custom Alert',
text: 'This is a custom alert box!',
icon: 'success',
confirmButtonText: 'OK'
});
}
</script>
</body>
</html>
Output
|
