How to use visibility property to create custom alert In Javascript

Using display property to create custom alert

We can use the visibility property in the same way as we used the display property to hide and show the alert box on click to the button.

Example: The below code will explain the use of the visibility property to create custom alert.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Advanced Custom Alert Box</title>
    <link rel="stylesheet" href="style.css">
</head>

<body style="text-align: center;">
    <h2>
        Creating a custom alert box
    </h2>
    <button class="open-btn" onclick="customAlert()">
        Show Alert
    </button>

    <div id="custom-alert" class="custom-alert">
        <div class="alert-content">
            <span id="alert-message"></span>
            <div class="button-container">
                <button id="confirm-btn" 
                    onclick="confirmAction()">
                    Confirm
                </button>
                <button id="cancel-btn" 
                    onclick="cancelAction()">
                    Cancel
                </button>
            </div>
        </div>
    </div>

    <script>
        function customAlert() {
            const message = 
                "Are you sure you want to perform this action?";
            document.getElementById("alert-message").
                innerText = message;
            document.getElementById("custom-alert").
                style.visibility = "visible";
            document.body.
                style.backgroundColor = "rgb(49 45 45 / 45%)";
        }

        function confirmAction() {
            document.getElementById("custom-alert").
                style.visibility = "hidden";
            document.body.
                style.backgroundColor = "#fff"
        }

        function cancelAction() {
            document.getElementById("custom-alert").
                style.visibility = "hidden";
            document.body.
                style.backgroundColor = "#fff"
        }
    </script>
</body>

</html>

CSS

.custom-alert {
    visibility: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #e8efe8;
    border: 1px solid #77bb77;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.alert-content {
    text-align: center;
}

.open-btn {
    color: #fff;
    background: green;
    border: none;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}

.button-container {
    margin-top: 15px;
}

#confirm-btn,
#cancel-btn {
    padding: 8px 20px;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin: 5px 10px;
    transition: background-color 0.3s;
}

#confirm-btn:hover,
#cancel-btn:hover {
    background-color: #45a049;
}

#confirm-btn:focus,
#cancel-btn:focus {
    outline: none;
}

#confirm-btn:active,
#cancel-btn:active {
    background-color: #3e8e41;
}

Output:

How to Change the Color of the Alert Box in JavaScript ?

Alert boxes, often utilized in JavaScript applications, provide users with important notifications or messages. However, their default appearance may not always blend seamlessly with the overall design of your website or application.

JavaScript offers several methods to customize alert boxes as listed below.

Table of Content