Диалоговое окно работает в течение 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();
    });
});
3 59
jquery jquery-ui-sortable

3 ответа:

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/

обновление:

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

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

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

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

клик для чтения документации Microsoft.

3

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

то, что он работал для меня (и я пробовал все), было так:

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

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