Javascript 在用户离开页面之前显示模态表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3927904/
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
Display modal form before user leaves page
提问by ma?ek
I've used window.onbeforeunloadto display a custom message when a user attempts to leave a site.
我曾经window.onbeforeunload在用户尝试离开站点时显示自定义消息。
Example:
例子：
window.onbeforeunload = function(){
if(some_condition){
return "Are you sure you want to navigate away from this page?\nAll unsaved changes will be lost.";
}
};
+--------------------------------------------------------+
| Are you sure you want to navigate away from this page? |
| All unsaved changes will be lost. |
| |
| [ Yes ] [ Cancel ] |
+--------------------------------------------------------+
However, I'd like to enhance this a bit. If possible, I'd like to use a custom modal form instead of the generic popup.
但是，我想稍微增强一下。如果可能，我想使用自定义模式表单而不是通用弹出窗口。
Is there a way to do this?
有没有办法做到这一点？
采纳答案by John Strickler
The unloadevent will fire when a user tries to navigate away. However, if you use a DIV as a pop-up the browser will navigate away before the user has a chance to read it.
当用户试图离开时，卸载事件将触发。但是，如果您使用 DIV 作为弹出窗口，浏览器将在用户有机会阅读它之前导航离开。
To keep them there you'd have to use a alert/prompt/confirm dialog boxes. (as far as I know)
要将它们保留在那里，您必须使用警报/提示/确认对话框。（据我所知）
回答by Mandeep Janjua
Binding to a html has worked very well for me instead of unload. The reason is well explained in another answerhere.
绑定到 html 对我来说效果很好，而不是卸载。原因在此处的另一个答案中得到了很好的解释。
$("html").bind("mouseleave", function () {
$('#emailSignupModal').modal(); \or any modal
$("html").unbind("mouseleave");
});
If you want to show the modal only once in a day or on any other particular condition match then you can use cookies.
如果您只想在一天中或在任何其他特定条件匹配时显示模态，那么您可以使用cookie。
回答by Nick Lucas
another alternative I see sites use for this functionality is creating an action when the user scrolls off the page like when they scroll to the address bar like this site does http://www.diamondcandles.com/this can be done using mouseleaveevent on the body element. For example:
我看到用于此功能的网站的另一种替代方法是在用户滚动页面时创建一个操作，就像他们滚动到地址栏一样，就像这个网站http://www.diamondcandles.com/这可以通过使用mouseleave事件来完成身体元素。例如：
$( document ).ready(function() {
$("body").bind("mouseenter",function(){
/* optional */
}).bind("mouseleave",function(){
if(!$.cookie('promo_popup')) {
/* do somthing (ex. init modal) */
/* set cookie so this does not repeat */
$.cookie('promo_popup', '1', { path: '/' });
}
});
});
回答by hookedonwinter
If they click the back button or something similar, I believe the alert/prompt/confirm boxes are your only option.
如果他们单击后退按钮或类似的东西，我相信警报/提示/确认框是您唯一的选择。
However, you can probably listen for specific keypress events, like ctrl/cmd + w/r, and interrupt those with a dialog.
但是，您可能可以侦听特定的按键事件，例如 ctrl/cmd + w/r，并使用对话框中断这些事件。
回答by epascarello
Is there a way to do this?
有没有办法做到这一点？
Nope.
不。
You are stuck with the prompt the browser gives you.
你被浏览器给你的提示卡住了。
回答by Moin Zaman
have a look at this: http://rewdy.com/tools/leavenotice-jquery-plugin
看看这个：http: //rewdy.com/tools/leavenotice-jquery-plugin
From the source you should be able to hack something together. http://github.com/rewdy/leaveNotice/blob/master/uncompressed/jquery.leaveNotice.js
从源头上，您应该能够一起破解某些东西。 http://github.com/rewdy/leaveNotice/blob/master/uncompressed/jquery.leaveNotice.js
also worth reading: How to popup when a visitor exits from a website
还值得一读：如何在访问者退出网站时弹出
回答by Lucky
var confirmOnPageExit = function (e) {
// If we haven't been passed the event get the window.event
e = e || window.event;
var message = "Are you sure you want to navigate away from this page? All unsaved changes will be lost.";
// For IE6-8 and Firefox prior to version 4
if (e)
{
e.returnValue = message;
}
// For Chrome, Safari, IE8+ and Opera 12+
return message;
};
window.onbeforeunload = confirmOnPageExit;
window.onbeforeunload = confirmOnPageExit;
回答by Tom Durkin
I've just had to do this for a project.
我只需要为一个项目执行此操作。
I set rel="external"on all external links then used JS/Jquery to detect if the link has this attribute, and if it does - prevent the default behavior and instead fire a modal.
我设置rel="external"了所有外部链接，然后使用 JS/Jquery 来检测链接是否具有此属性，如果有 - 防止默认行为，而是触发模式。
$('a').on('click', function(e){
// Grab the url to pump into the modal 'continue' button.
var thisHref = $(this).attr('href');
// Grab the attr so we can check if its external
var attr = $(this).attr('rel');
// Check if link has rel="external"
if (typeof attr !== typeof undefined && attr !== false) {
// prevent link from actually working first.
e.preventDefault();
// insert code for firing your modal here!
// get the link and put it in your modal's 'continue button'
$('.your-continue-button').attr('href', thisHref);
}
});
Hope this helps.
希望这可以帮助。
