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

Question

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.

Where is the browser popup coming from if not a programmed JavaScript alert? — Phillip Berger, Mar 01 '13 at 07:59
`onbeforeunload` invokes the browsre popup like this `window.onbeforeunload = function(event) { var surveyText = "Please take a few moments to let us know why you want to quit the tutorial by clicking on the 'Stay on page' button below"; return surveyText; }` — Harsha Venkataramu, Mar 01 '13 at 08:02

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

~~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?

edited May 23 '17 at 11:43

Community

1
1

answered Mar 01 '13 at 08:06

Phillip Berger

2,317
1
11
30

I don't think that this will work for browser events.I am pretty sure that this will work for other `javascript events` like clicking a link on the page,etc,but are you sure that this will work for a `browser event`.It would be great if you could share a working demo or a JSFiddle for this one. – Harsha Venkataramu Mar 01 '13 at 08:12
What I'm saying is you can open whatever you want to present in a modal dialog and disable the buttons for X amount of seconds. – Phillip Berger Mar 01 '13 at 08:24
I am not sure if I follow you.How would you disable the close button. – Harsha Venkataramu Mar 01 '13 at 09:38
There is a .button("disable") API in jQuery. – Phillip Berger Mar 01 '13 at 10:48
1

Again, that doesn't apply to browser close button! – Harsha Venkataramu Mar 01 '13 at 11:15
Sure it does. You just couple it up with the .unload() handler. – Phillip Berger Mar 01 '13 at 11:17
I can but I'm in bed on my iPad now. If you still don't have it by the time I wake up I'll do one on there. – Phillip Berger Mar 01 '13 at 11:20
That would be great! Thanks! – Harsha Venkataramu Mar 01 '13 at 11:21
Just a quick idea. `$(window).unload(function() { $("#stop-close").dialog("open"); });` – Phillip Berger Mar 01 '13 at 11:23
@harsha: See my updated solution. Seems you where right after all. :( – Phillip Berger Mar 01 '13 at 20:27
Thanks for the link.Will accept this as the answer :-) Hoping someday, browsers will have facilitate custom popups on browser events. – Harsha Venkataramu Mar 02 '13 at 04:00
Is there another alternative so I can show my modal/popup without showing browser's alert? – tjvg1991 Jan 29 '18 at 02:47

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

1 Answers1