Search code examples
javascriptjqueryhtmlonbeforeunload

Javascript How To : hide the browser popup for onBeforeUnload and display custom popup

I am building a MMO which has a tutorial in it.

When the user tries to navigate away from the tutorial or close the tab/browser while on the tutorial, I need to show a custom popup which has a options as to why the person is quitting the tutorial.

I am familiar with the onbeforeunload event but my requirement is to display the custom popup instead of the browser default popup as it can't be customized other than changing the text message.

Is there any way I can hide the browser popup and show my custom popup instead.

Solution

  • I'd really suggest you use jQuery UI for this. It'll make your life much easier and has modal dialogs built into the API. See here: http://jqueryui.com/dialog/#modal

    OK, what I said before was totally wrong. Must have been tired.

    You can't override the onbeforeunload because of the way it fires in the DOM. This is a good SO explaining it.

    How can I override the OnBeforeUnload dialog and replace it with my own?