窗口退出時的模態彈出窗口
[英]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.