jQuery 对话框运行 1 秒后消失？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6063522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dialog box runs for 1 sec and disappears?
提问by user154107
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.
我在用户离开页面时运行一个对话框。唯一的问题是它运行了 1 秒然后消失了？我知道它与 有关bind('beforeunload')，但对话框死得比你读得快。
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();
});
});
回答by Rocket Hazmat
beforeunloadutilizes 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.
beforeunload利用浏览器内置的方法，你需要向它返回一个字符串，浏览器会显示该字符串并询问用户是否要离开页面。
You cannot use your own dialog boxes (or jQueryUI modal dialogs) to override beforeunload.
您不能使用自己的对话框（或 jQueryUI 模式对话框）来覆盖beforeunload.
beforeunloadcannot redirect the user to another page.
beforeunload无法将用户重定向到另一个页面。
$(window).on('beforeunload', function(){
return '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.
这将弹出一个警告框'Are you sure you want to leave?'，询问用户是否要离开该页面。
(UPDATE: Firefox doesn't display your custom message, it only displays its own.)
（更新：Firefox 不显示您的自定义消息，它只显示自己的消息。）
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()，请注意它不能阻止页面卸载或重定向用户。（更新：Chrome 和 Firefox 阻止警报unload。）
$(window).unload(function(){
alert('Bye.');
});
Demo: http://jsfiddle.net/3kvAC/241/
演示：http: //jsfiddle.net/3kvAC/241/
UPDATE:
更新：
$(...).unload(...)is deprecatedsince jQuery v1.8, instead use:
$(...).unload(...)自 jQuery v1.8 起已弃用，改为使用：
$(window).on('unload', function(){
});
回答by kbvishnu
You can also use the following unload method introduced by Microsoft to achieve this. Click hereto see live demo.
也可以使用下面微软介绍的卸载方法来实现。单击此处查看现场演示。
function closeIt()
{
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
window.onbeforeunload = closeIt;
Clickto read Microsoft documentation.
单击以阅读 Microsoft 文档。
回答by DeathMomo
In my case i use it to show a 'preloader' before going to another part of my webapp, so this matches with the 'preloader' that appears in the new page opened, for an aesthetic change between pages.
在我的情况下，我使用它在转到我的 web 应用程序的另一部分之前显示“预加载器”，因此这与打开的新页面中出现的“预加载器”相匹配，以实现页面之间的美观变化。
What it worked for me (and I tried everything), was this:
它对我有用（我尝试了所有方法）是这样的：
function myLoader() {
// Show my Loader Script;
}
$( window ).on( 'beforeunload' , function() {
myLoader();
} );
