¿El cuadro de diálogo se ejecuta durante 1 segundo y desaparece?

Question

Estoy ejecutando un cuadro de diálogo cuando el usuario abandona la página. Lo único es que se ejecuta durante 1 segundo y desaparece? Sé que tiene que ver con bind('beforeunload'), pero el diálogo muere antes de que lo puedas leer.

¿Cómo evito que esto suceda?

$(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

beforeunload utiliza un método integrado en el navegador, es necesario devolver una cadena a la misma, y ​​el navegador mostrará la cadena y preguntar al usuario si desea salir de la página.

No puede usar sus propios cuadros de diálogo (o cuadros de diálogo jQueryUI modales) para anular beforeunload.

beforeunload no se puede redirigir al usuario a otra página.

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

Esto hará que un cuadro de alerta pop-up que dice 'Are you sure you want to leave?' y le pregunta al usuario si quieren salir de la página.

(ACTUALIZACIÓN:. Firefox no muestra el mensaje personalizado, que sólo muestra su propia)

Si desea ejecutar una función que la página se descarga, se puede utilizar $(window).unload(), justo en cuenta que puede No detenga la página para descargar o redirigir al usuario. (ACTUALIZACIÓN: alertas de bloques Chrome y Firefox en unload.)

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

Demostración: http://jsfiddle.net/3kvAC/241/

ACTUALIZACIÓN:

$(...).unload(...) es deprecated desde jQuery v1.8, en lugar de utilizar:

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

Answer 2

También puede utilizar el siguiente método de descarga introducido por Microsoft para lograr esto. Haga clic en here para ver la demostración en vivo.

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

Click para leer la documentación de Microsoft.

Answer 3

En mi caso lo uso para mostrar un 'preloader' antes de ir a otra parte de mi aplicación web, por lo que coincide con el 'preloader' que aparece en la nueva página abierta, para un cambio estético entre páginas.

Lo que funcionó para mí (y he intentado todo), era la siguiente:

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

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