窗口退出时的模态弹出窗口
[英]Modal Popup on Window Exit
问题描述
试图弄清楚如何在浏览器窗口退出时弹出模态。 我知道如何做一个警告框，但我想让用户在退出时回答问卷，而不是一个基本的“你确定要离开”警告框。
5 个解决方案
解决方案1
1 2014-09-24 19:53:49
我有类似的要求，我想使用漂亮的 HTML 消息而不是默认的 js 消息。 花了一些时间后，我终于找到了一种方法。 我使用了 jQuery Colorbox模态，它在任何模态需求中都非常有用，而不仅仅是在这里。
基本上，您可以使用mousemove事件并查找 Y 坐标（ e.clientY ）是否小于 5。因此，每次鼠标靠近地址栏（用户输入新 URL 或尝试关闭窗口）时都会触发它。
jQuery(document).ready(function() {
jQuery(document).mousemove(function(e) {
if (e.clientY <= 5) {
jQuery.colorbox({initialHeight: 250, initialWidth: 250, html:'<h2>any custom HTML here</h2><br/><img src="nice-img" />'});
}
});
});
我发现了很多使用e.pageY例子，但请注意，只有在用户没有向下滚动时才会触发它。 因此，如果您向下滚动 5 个像素， e.pageY将不起作用，但e.clientY将起作用。 e.pageY给出偏移量，而e.clientY给出绝对坐标。 很重要！
解决方案2
1 2012-02-14 17:07:52
你不能。 阻止窗口关闭的唯一方法是使用 JS Confirm（或警报）。 如果您只是在页面内弹出一个模态窗口，该窗口仍会关闭并且您永远不会看到它。 最好的办法是打开 JS 警报，然后将页面重定向到问题。 但请注意，这对用户来说非常烦人。
解决方案3
1 2012-02-14 17:10:24
虽然并不总是建议在退出时放置代码，但您可以执行以下操作：
<body onUnload="javascript:openDialog()">
要么
$(document).bind('unload', openDialog);
然后：
function openDialog(e) {
e.preventDefault();
$("#yourQuestionnaire").dialog('open');
}
但通常避免绑定到onUnload事件是一个很好的做法，因为它的触发在所有浏览器和情况下都不可靠。
更新
文档显示为：
$(window).unload(function() {
alert('Handler for .unload() called.');
});
在任何 Stackoverflow 页面上通过 Firefox/Firebug 控制台应用它时，这对我有用。
文档在这里： http : //api.jquery.com/unload/
解决方案4
1 已采纳 2012-02-14 17:14:07
window.onbeforeunload = function () {
return 'Your content has not been properly saved yet!';
};
这将使浏览器显示一个确认框，如下所示：
如您所见，函数返回的字符串显示在框中。
解决方案5
0 2019-11-15 10:30:15
这是一个简单的轻量级 JQuery 插件，您可以参考您的场景，它跟踪鼠标指针并在鼠标移出视口时立即触发模态： jQuery Exit Modal Plugin Example
$(window).on("unload",function() {
alert("Handler for .unload() called");
});
NOTE: .unload() has been deprecated in version 1.8 and removed in jQuery 3.0; please
use .on( "unload", handler ) instead of .unload( handler ).
在这里看到：卸载（处理程序）
退出窗口时出现模式弹出窗口-重置一次
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.