Диалоговое окно работает в течение 1 секунды и исчезает?

Я запускаю диалоговое окно, когда пользователь покидает страницу. Единственное, что он работает в течение 1 секунды и исчезает? Я знаю, что это связано с bind('beforeunload'), но диалог умирает раньше, чем вы можете прочитать.

Как я могу остановить это?

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

Ответы

Ответ 1

beforeunload использует метод, встроенный в браузер, вам нужно вернуть ему строку, и браузер отобразит строку и спросит пользователя, хотят ли они покинуть страницу.

Вы не можете использовать свои собственные диалоговые окна (или модальные диалоги jQueryUI) для переопределения beforeunload.

beforeunload не может перенаправить пользователя на другую страницу.

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

Это приведет к появлению окна оповещения, в котором говорится 'Are you sure you want to leave?', и спросит пользователя, хотят ли они оставить страницу.

(ОБНОВЛЕНИЕ: Firefox не отображает ваше собственное сообщение, оно отображает только его собственное.)

Если вы хотите запустить функцию при выгрузке страницы, вы можете использовать $(window).unload(), просто обратите внимание, что она не может остановить загрузку страницы или перенаправление пользователя. (ОБНОВЛЕНИЕ: предупреждения Chrome и Firefox блокируются в unload.)

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

Демо: http://jsfiddle.net/3kvAC/241/

UPDATE:

$(...).unload(...) устарел с jQuery v1.8, вместо этого используйте:

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

Ответ 2

Вы также можете использовать следующий метод разгрузки, представленный Microsoft для достижения этого. Нажмите здесь, чтобы увидеть живую демонстрацию.

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

Нажмите, чтобы прочитать документацию Microsoft.

Ответ 3

В моем случае я использую его, чтобы показать "preloader" перед тем, как перейти к другой части моего webapp, так что это соответствует "preloader", который появляется на новой странице, открывшейся для эстетического изменения между страницами.

Что это сработало для меня (и я все испробовал):

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

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