Displaying a custom dialog when the user exits the browser?

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:

• http://stackoverflow.com/questions/1889404/jquery-ui-dialog-onbeforeunload
• http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own

Answer 1

As per the questions you already looked at, you cannot customize that dialog beyond passing in a string message to be displayed by the browser.

window.onbeforeunload - MDC

Answer 2

you could use a hidden Flash .swf that you reveal at onbeforeunload time instead of window.open

Answer 3

I just went the window.open route onbeforeunload.