JavaScript: How can I prompts a custom message box when they close broswer?

Question

Problem:

I am new in JavaScript. And I want to give a message like "you have down xxx works today!",
when my users close broswer. I've search google/stackoverflow and get some solutions in Prompt User before browser close?

BUT, when I try code as followd, it just shows the broswer's default message, not mine. How can I solve it?

Code:

function test(evt) {
    var message = 'Did you remember to download your form?';
    if (typeof evt == 'undefined') {
        evt = window.event;
    }
    if (evt) {
        evt.returnValue = message;
    }
    return message;
}

Are there some useful APIs or solutions for me?

Edit (2021.9.22) I try the tips posted By @NiceBooks like

window.addEventListener('beforeunload', function (e) {
    window.alert("ready to exit");
    window.confirm("just a test");
    e.returnValue = '';
});

IE and FireFox prompt their default message. If e.returnValue is not set, there is no prompt box when I click exit button. beforeunload says:

'In some browsers, calls to window.alert(), window.confirm(), and window.prompt() may be ignored during this event. See the HTML specification for more details. '

Maybe it's the reason why I failed. But is there really no solution?

Do you want to use a browser prompt, alert or modal to display your message? — Ann Francis, Sep 15 '21 at 10:09
Yes, it's what i want @AnnFrancis Do you have any solution? Thanks — dueToLife, Sep 22 '21 at 07:03
Unfortunately, most modern Browsers do not support custom messages. I had the same issue too. [link](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) — Ann Francis, Sep 22 '21 at 07:35
I have learnt this from stackoverflow and doc in MDN. But if I just want to prompt a confirm or alert dialog box befor user exit browser, is there any solution? Isn't there a way to prompt a custom message before the user click exit button？ @AnnFrancis — dueToLife, Sep 22 '21 at 08:16
Does this answer your question? [Is it possible to display a custom message in the beforeunload popup?](https://stackoverflow.com/questions/38879742/is-it-possible-to-display-a-custom-message-in-the-beforeunload-popup) — Remi Guan, Sep 22 '21 at 09:05
@dueToLife If you're designing your own "close button", then yes. You can always do anything when the user is clicking your button. But if it's the system close button like you're closing the browser, then it triggers that event `beforeunload`, then event `unload`, then you can't do anything. — Remi Guan, Sep 22 '21 at 09:08
@dueToLife If you have an exit button, then you can display a modal or alert with your message when the button is clicked. — Ann Francis, Sep 22 '21 at 09:32
Thank you @CasimirCrystal . I have tried some method in above link. But now they are useless. I've already understand why my efforts failed. Again, Thank you. — dueToLife, Sep 22 '21 at 13:21

Nice Books · Answer 1 · 2021-09-20T13:44:41.860

0

You can try with the window.confirm(msg) function.

https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm

Use it in conjunction with the beforeunload event on the window object:

beforeunload in MDN

edited Sep 20 '21 at 13:44

answered Sep 15 '21 at 10:07

Nice Books

1,675
2
17
21

I have tried your advice like ''. But when i click the exit button, there is nothing happend.... – dueToLife Sep 20 '21 at 12:19
Use beforeunload with window not body. See edit. – Nice Books Sep 20 '21 at 13:45
Thank you @NiceBooks I read both docs and make some attempt. It still doesn't work but I get some information. I edit it in my problem. – dueToLife Sep 22 '21 at 07:26

score 0 · Answer 2 · answered Sep 17 '22 at 18:52

Try this, enter the following code inside the head tag.

<script>
const beforeUnloadListener = (event) => {
  event.preventDefault();
  return event.returnValue = "Are you sure you want to exit?";
};

//this piece of code will trigger a pupup message
addEventListener("beforeunload", beforeUnloadListener, {capture: true});
</script>

Hope this helps.

JavaScript: How can I prompts a custom message box when they close broswer?

2 Answers2