Question

试图找出如何在浏览器窗口退出时弹出模式。我知道如何做一个警告框，但是我想让用户在退出时回答问卷，而不是基本的“你确定要离开”警告框。

Answer 1

你做不到。阻止窗口关闭的唯一方法是使用JS Confirm（或alert）。如果你只是在页面中弹出一个模态，窗口仍会关闭，你永远不会看到它。最好的办法是打开JS警报，然后将页面重定向到问题。虽然注意到这对用户来说非常烦人。

Answer 2

虽然并不总是建议将代码放在退出处，但您可以这样做：

<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/

Answer 3

window.onbeforeunload = function () {
  return 'Your content has not been properly saved yet!';
};

这将使浏览器显示如下的确认框：

http://f.cl.ly/items/2L0t1k0d2U0p0Z0z1d2t/Screen%20shot%202012-02-14%20at%206.09.58%20PM.png

如您所见，函数返回的字符串显示在框中。

Answer 4

我有类似的要求，我想使用漂亮的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给出绝对坐标。非常重要！

Answer 5

这是一个简单的轻量级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 ).

请参见此处： unload(handler)

窗口退出时的模态弹出窗口

5 个答案: