Click here to Skip to main content
15,879,613 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I don't want alert message. I just want to show my own custom popup on page reload and not allow page to refresh until I select leave or cancel from popup.

What I have tried:

<div id="pain" class="modal">
    <div class="popup">
        <div class="popup-content">
            <p>you have not saved your data , 
            Would you like to save it before leaving ?</p>
            <button id="cancel">Cancel</button>
            <button id="leave">Leave</button>

var popup_open = false;
var popupElement = document.getElementById('pain');
window.addEventListener("beforeunload", function (event) {
    event.returnValue = false;
    event.preventDefault(); = 'block';
    popup_open = true;
Updated 1-Nov-23 10:05am

1 solution


You should note that modern implementations:
Only show a generic browser-specified string in the displayed dialog. This cannot be controlled by the webpage code.
This has been the case for at least 12 years.

Allowing sites to control the message shown to users when they navigate away from a page is considered a security risk.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900