How to Replace a JavaScript Alert Pop Up with a Fancy Alert Box ?

Last Updated : 05 Apr, 2024

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.

Table of Content

By overriding the alert function
Using a SweetAlert Library

By overriding the alert function

In 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>

JavaScript

// 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

gfgfa

Using a SweetAlert Library

In 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>