Display modal form before user leaves page

Question

I've used window.onbeforeunload to display a custom message when a user attempts to leave a site.

Example:

window.onbeforeunload = function(){
  if(some_condition){
    return "Are you sure you want to navigate away from this page?\nAll unsaved changes will be lost.";
  }
};


+--------------------------------------------------------+
| Are you sure you want to navigate away from this page? |
| All unsaved changes will be lost.                      |
|                                                        |
|          [ Yes ]  [ Cancel ]                           |
+--------------------------------------------------------+

However, I'd like to enhance this a bit. If possible, I'd like to use a custom modal form instead of the generic popup.

Is there a way to do this?

Answer 1

Is there a way to do this?

Nope.

You are stuck with the prompt the browser gives you.

Answer 2

The unload event will fire when a user tries to navigate away. However, if you use a DIV as a pop-up the browser will navigate away before the user has a chance to read it.

To keep them there you'd have to use a alert/prompt/confirm dialog boxes. (as far as I know)

Answer 3

have a look at this: http://rewdy.com/tools/leavenotice-jquery-plugin

From the source you should be able to hack something together. http://github.com/rewdy/leaveNotice/blob/master/uncompressed/jquery.leaveNotice.js

also worth reading: http://stackoverflow.com/questions/944234/how-to-popup-when-a-visitor-exits-from-a-website

Answer 4

If they click the back button or something similar, I believe the alert/prompt/confirm boxes are your only option.

However, you can probably listen for specific keypress events, like ctrl/cmd + w/r, and interrupt those with a dialog.