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

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

Are you sure you want to leave " + brandName + "?
Your order will not be saved.

"); // 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(); }); });

beforeunload utiliza un método integrado en el navegador, debe devolverle una cadena, y el navegador mostrará la cadena y le preguntará al usuario si quiere abandonar la página.

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

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

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

Esto hará que aparezca un cuadro de alerta que dice 'Are you sure you want to leave?' y le pregunta al usuario si quiere abandonar la página.

(ACTUALIZACIÓN: Firefox no muestra su mensaje personalizado, solo muestra el suyo).

Si desea ejecutar una función cuando la página está descargando, puede usar $(window).unload() , solo tenga en cuenta que no puede evitar que la página descargue o redirija al usuario. (ACTUALIZACIÓN: Chrome y Firefox bloquean las alertas en la unload ).

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

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

ACTUALIZAR:

$(...).unload(...) está en desuso desde jQuery v1.8, en su lugar use:

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

También puede usar el siguiente método de descarga introducido por Microsoft para lograr esto. Haga clic aquí 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; 

Haga clic para leer la documentación de Microsoft.

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 las páginas.

Lo que funcionó para mí (y lo intenté todo), fue esto:

 function myLoader() { // Show my Loader Script; } $( window ).on( 'beforeunload' , function() { myLoader(); } );