Dialog box runs for 1 sec and disappears?

Question

I'm running a dialog box upon user leaving the page. The only thing is it runs for 1 sec and disappears? I know it has to do with bind('beforeunload'), but the dialog dies sooner than you can read it.

How do I stop this from happening?

$(document).ready(function() {  

    // Append dialog pop-up modem to body of page
    $('body').append("<div id='confirmDialog' title='Confirm'><p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>Are you sure you want to leave " + brandName + "? <br /> Your order will not be saved.</p></div>");

    // Create Dialog box
    $('#confirmDialog').dialog({
      autoOpen: false,
      modal: true,
      overlay: {
        backgroundColor: '#000',
        opacity: 0.5
      },
      buttons: {
        'I am sure': function() {
          var href = $(this).dialog('option', 'href', this.href);
          window.location.href = href;
        },
        'Complete my order': function() {
          $(this).dialog('close');
        }
      }
    });

    // Bind event to Before user leaves page with function parameter e
    $(window).bind('beforeunload', function(e) {    
        // Mozilla takes the
        var e = $('#confirmDialog').dialog('open').dialog('option', 'href', this.href);
        // For IE and Firefox prior to version 4
        if (e){
            $('#confirmDialog').dialog('open').dialog('option', 'href', this.href);
        }
        // For Safari
        e.$('#confirmDialog').dialog('open').dialog('option', 'href', this.href);
    }); 

    // unbind function if user clicks a link
    $('a').click(function(event) {
        $(window).unbind();
        //event.preventDefault();
        //$('#confirmDialog').dialog('option', 'href', this.href).dialog('open');
    });

    // unbind function if user submits a form
    $('form').submit(function() {
        $(window).unbind();
    });
});

Answer 1

You can also use the following unload method introduced by Microsoft to achieve this. Click here to see live demo.

function closeIt()
  {
    return "Any string value here forces a dialog box to \n" + 
         "appear before closing the window.";
  }
  window.onbeforeunload = closeIt;

Click to read Microsoft documentation.

Answer 2

beforeunload utilizes a method built in to the browser, you need to return a string to it, and the browser will display the string and ask the user if they want to leave the page.

You cannot use your own dialog boxes (or jQueryUI modal dialogs) to override beforeunload.

beforeunload cannot redirect the user to another page.

$(window).on('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

This will make an alert box pop up that says 'Are you sure you want to leave?' and asks the user if they wanna leave the page.

(UPDATE: Firefox doesn't display your custom message, it only displays its own.)

If you want to run a function as the page is unloading, you can use $(window).unload(), just note that it can't stop the page from unloading or redirect the user. (UPDATE: Chrome and Firefox block alerts in unload.)

$(window).unload(function(){
  alert('Bye.');
});

Demo: http://jsfiddle.net/3kvAC/241/

UPDATE:

$(...).unload(...) is deprecated since jQuery v1.8, instead use:

$(window).on('unload', function(){
});

Answer 3

In my case i use it to show a 'preloader' before going to another part of my webapp, so this matches with the 'preloader' that appears in the new page opened, for an aesthetic change between pages.

What it worked for me (and I tried everything), was this:

function myLoader() {
    // Show my Loader Script;
}

$( window ).on( 'beforeunload' , function() {
    myLoader();
} );