当前位置：文江博客话题详情

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

发布于 2025-01-05 22:05:39 字数 72 浏览 2 评论 0原文

试图弄清楚如何在浏览器窗口退出时弹出模式。我知道如何制作警报框，但我希望用户在退出时回答问卷，而不是基本的“您确定要离开”警报框。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

椵侞 2025-01-12 22:05:39

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

这将使浏览器显示一个确认框，如下所示：

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

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

This will make the browser display a confirmation box like this one:

As you can see, the string returned by the function is shown in the box.

回复收藏 0 原文

So要识趣 2025-01-12 22:05:39

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

回复收藏 0 原文

镜花水月 2025-01-12 22:05:39

虽然并不总是建议在退出时放置代码，但您可以执行以下操作：

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

While it is not always recommended to put code on exit, you could do something like this:

<body onUnload="javascript:openDialog()">

$(document).bind('unload', openDialog);

Then:

function openDialog(e) {
    e.preventDefault();
    $("#yourQuestionnaire").dialog('open');
}

But generally it is a good practice to avoid binding to the onUnload event because its firing isn't reliable in all browsers and situations.

UPDATE

The documentation shows it as:

$(window).unload(function() {
  alert('Handler for .unload() called.');
});

This works for me when applying it via the Firefox/Firebug console on any Stackoverflow page.

Documentation here: http://api.jquery.com/unload/

回复收藏 0 原文

夏天碎花小短裙 2025-01-12 22:05:39

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

I had similar requirements where I wanted to use nice HTML message instead of default js message. After spending some time I finally found a way to do it. I have used jQuery Colorbox modal which is very useful in any modal requirement, not just here.

Basically you can use mousemove event and find if Y coordinate (e.clientY ) is less than 5. So it will be fired every time when mouse is near address bar (user typing new URL or trying to close window).

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" />'});
    }
});

});

I found many example using e.pageY but note that it will only be fired if user has not scrolled down. So if you scroll down even for 5 pixel, e.pageY will not work, but e.clientY will work.
e.pageY gives offset while e.clientY gives absolute coordinate. Very important!

回复收藏 0 原文

魔法少女 2025-01-12 22:05:39

这是一个简单的轻量级 JQuery 插件，您可以参考您的场景
它跟踪鼠标指针并在鼠标移出视口时触发模式： jQuery 退出模态插件示例

$(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 ).

请参阅此处：卸载（处理程序）

Here is a simple light-weight JQuery plugin that you could refer for your scenario
which tracks your mouse pointer and triggers the modal as soon as the mouse moves out of the viewport: 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 ).

See here : unload(handler)

回复收藏 0 原文

~没有更多了~