Javascript 如何：隐藏 onBeforeUnload 的浏览器弹出窗口并显示自定义弹出窗口答案

【问题标题】：Javascript How To : hide the browser popup for onBeforeUnload and display custom popupJavascript 如何：隐藏 onBeforeUnload 的浏览器弹出窗口并显示自定义弹出窗口
【发布时间】：2013-03-01 06:24:44
【问题描述】：

我正在构建一个包含教程的 MMO。

当用户在教程中尝试离开教程或关闭选项卡/浏览器时，我需要显示一个自定义弹出窗口，其中包含有关此人退出教程的原因的选项。

我熟悉onbeforeunload 事件，但我的要求是显示自定义弹出窗口而不是浏览器默认弹出窗口，因为除了更改文本消息之外无法自定义它。

有什么方法可以隐藏浏览器弹出窗口并显示我的自定义弹出窗口。

【问题讨论】：

如果不是编程的 JavaScript 警报，浏览器弹出窗口来自哪里？
onbeforeunload 像这样调用浏览器弹出窗口window.onbeforeunload = function(event) { var surveyText = "Please take a few moments to let us know why you want to quit the tutorial by clicking on the 'Stay on page' button below"; return surveyText; }

标签： javascript jquery html onbeforeunload

【解决方案1】：

~~我真的建议您为此使用 jQuery UI。它会让你的生活更轻松，并且在 API 中内置了模态对话框。见这里：http://jqueryui.com/dialog/#modal~~

好吧，我之前说的完全错了。一定是累了。

您不能覆盖 onbeforeunload，因为它在 DOM 中触发的方式。这是一个很好的解释。

How can I override the OnBeforeUnload dialog and replace it with my own?

【讨论】：

我不认为这适用于浏览器事件。我很确定这适用于其他javascript events，例如单击页面上的链接等，但你确定这将适用于browser event。如果您可以为此共享一个工作演示或 JSFiddle，那就太好了。
我的意思是，您可以在模式对话框中打开任何您想显示的内容，并在 X 秒内禁用按钮。
我不确定我是否关注你。你会如何禁用关闭按钮。
jQuery中有一个.button("disable") API。
同样，这不适用于浏览器关闭按钮！