Display Modal Form Before User Leaves Page

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

Solution 1:

Binding to a html has worked very well for me instead of unload. The reason is well explained in another answer here.

$("html").bind("mouseleave", function () {
    $('#emailSignupModal').modal(); \\or any modal
    $("html").unbind("mouseleave");
});

If you want to show the modal only once in a day or on any other particular condition match then you can use cookies.

Solution 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)

Solution 3:

Is there a way to do this?

Nope.

You are stuck with the prompt the browser gives you.

Solution 4:

another alternative I see sites use for this functionality is creating an action when the user scrolls off the page like when they scroll to the address bar like this site does http://www.diamondcandles.com/ this can be done using mouseleave event on the body element. For example:

$( document ).ready(function() {

  $("body").bind("mouseenter",function(){
   /* optional */

  }).bind("mouseleave",function(){
    if(!$.cookie('promo_popup')) {

      /* do somthing (ex. init modal) */

      /* set cookie so this does not repeat */   
      $.cookie('promo_popup', '1', { path: '/' });

    }
 });
});

Solution 5:

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.