On
HTML Modal Alert is a way to customize alerts in your websites. It allows you to change a standard JavaScript button to a beautiful, customizable, and responsive pop-up dialog boxes. The code is lightweight and independent.







Paste-ready Code for HTML Modal Alert


<!--Button to trigger modal-->
<p><button id="alertButton" type="button">Button for HTML Modal Alert</button></p>

<!--Modal Alert Box-->
<div id="customAlert" style="background: white; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px; display: none; left: 50%; padding: 20px; position: fixed; text-align: center; top: 50%; transform: translate(-50%, -50%); z-index: 9999;">
    <p id="alertText" style="color: black; font-size: 30px;"></p>
    <button id="closeAlert" style="background: rgb(0, 123, 255); border-radius: 5px; border: medium; color: white; cursor: pointer; margin-top: 10px; padding: 5px 10px;">Okay</button>
</div>

<style>
    #customAlert {
        width: 90%; 
        max-width: 600px; 
        padding: 20px;
    }

    #alertText {
        font-size: 3vw; 
        text-align: center;
        font-family: "Acme", sans-serif;
    }

    #closeAlert {
        padding: 10px 20px;
    }

    @media (max-width: 600px) {
        #alertText {
            font-size: 5vw; 
        }

        #closeAlert {
            padding: 8px 16px;
        }
    }

    @media (min-width: 601px) {
        #alertText {
            font-size: 20px;
        }

        #closeAlert {
            padding: 10px 20px; 
        }
    }
</style>

<script>

// HTML Modal Alert
// developed by Tawhidur Rahman Dear, https://www.tawhidurrahmandear.com
// Live Preview available at https://www.devilhunter.net/2026/01/html-modal-alert.html 

function showCustomAlert(message) {
    const alertBox = document.getElementById("customAlert");
    const alertText = document.getElementById("alertText");

    if (alertBox && alertText) {
        alertText.textContent = message; // Set message
        alertBox.style.display = "block"; // Show modal
    }
}

// Close modal when "OK" button is clicked
document.getElementById("closeAlert").addEventListener("click", () => {
    document.getElementById("customAlert").style.display = "none";
});

// Button click event to show modal alert
document.getElementById("alertButton").addEventListener("click", () => {
    showCustomAlert("This is HTML Modal Alert!");
});
</script>