como - jquery ui themes

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

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

Answer 2

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

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 deprecated desde jQuery v1.8, en su lugar use:

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