Question

Yes, I realize this is horrible UI and bad accessibility wise, but I am forced to seek out the options due to contracted work ( to which I didn’t initially agree upon and am stuck with ).

I know that you can assign an event handler to onbeforeunload like:

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

That would bring about a dialog generated by the OS/browser which cannot be customized. It would ask you to Cancel your request or go on.

So far it seems the only way I can display any custom-ness is by inserting a window.open in that event handler:

window.onbeforeunload = function() {
     var x = window.open('modal.html');
}

This would most likely get blocked by any modern browser as a “popup”. I have to display an entirely new page with my dialog, but this seems to be the only way to meet the demand.

Is this pretty much the only option I have? Other than forcefully telling the client it isn’t recommended to do this?

The only other option would be relying on the user to hit “Cancel request” and then insert the dialog.

Questions I have already looked at:

• jQuery UI Dialog OnBeforeUnload
• How can I override the OnBeforeUnload dialog and replace it with my own?

Answer 1

I just went the window.open route onbeforeunload.