对话框运行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(...)已已弃用，请改用:

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

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