对话框运行 1 秒后消失? [英] Dialog box runs for 1 sec and disappears?

问题描述

我在用户离开页面时运行一个对话框.唯一的问题是它运行了 1 秒然后消失了?我知道它与 bind('beforeunload') 有关，但对话框死得比你能读的还早.

I'm running a dialog box upon user leaving the page. The only thing is it runs for 1 sec and disappears? I know it has to do with bind('beforeunload'), but the dialog dies sooner than you can read it.

如何阻止这种情况发生?

How do I stop this from happening?

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

推荐答案

beforeunload 利用浏览器内置的方法，需要返回一个字符串给它，浏览器会显示该字符串并询问用户是否要离开该页面.

beforeunload utilizes a method built in to the browser, you need to return a string to it, and the browser will display the string and ask the user if they want to leave the page.

您不能使用自己的对话框(或 jQueryUI 模式对话框)来覆盖 beforeunload.

You cannot use your own dialog boxes (or jQueryUI modal dialogs) to override beforeunload.

beforeunload 不能将用户重定向到另一个页面.

beforeunload cannot redirect the user to another page.

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

这会弹出一个警告框，上面写着'Are you sure you want to leave?' 并询问用户是否要离开页面.

This will make an alert box pop up that says 'Are you sure you want to leave?' and asks the user if they wanna leave the page.

(更新:Firefox 不显示您的自定义消息，它只显示自己的消息.)

(UPDATE: Firefox doesn't display your custom message, it only displays its own.)

如果你想在页面卸载时运行一个函数，你可以使用$(window).unload()，只是注意它不能阻止页面卸载或重定向用户.(更新:Chrome 和 Firefox 在 unload 中阻止警报.)

If you want to run a function as the page is unloading, you can use $(window).unload(), just note that it can't stop the page from unloading or redirect the user. (UPDATE: Chrome and Firefox block alerts in unload.)

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

演示:http://jsfiddle.net/3kvAC/241/

更新:

$(...).unload(...) 自 jQuery 起已弃用v1.8，改为使用:

$(...).unload(...) is deprecated since jQuery v1.8, instead use:

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

这篇关于对话框运行 1 秒后消失?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！