1

我正在尝试创建和样式化用户尝试离开页面时出现的退出弹出窗口（边框、背景、字体）。这是一个脚本示例：

$(window).bind('beforeunload', function(){

 $(function() {
   alert("My message");
 });

return ' ';

});

警报框首先显示，用户必须单击确定才能出现退出确认框。这确实有效，因为它可以防止退出确认框立即出现在顶部。确认框消息：

This page is asking you to confirm that you want to leave - data you have entered may not be saved. (Leave page / Stay on page)

但我知道改变警报框的样式是不可能的，所以我尝试使用 jQuery UI 对话框（）：

$(window).bind('beforeunload', function(){

$(function() {
    $( "#dialog" ).dialog();
});

return ' ';
});

不幸的是，这也不能按预期工作，因为对话框没有与警报相同的功能。对话框与确认框同时出现。

我怎么解决这个问题？

4

2 回答 2

0

您可以尝试通过取消onbeforeunload事件来禁用本机退出模式。

window.onbeforeunload = null 正如这里所解释的

这意味着您必须在离开当前页面时阻止默认事件行为，以便您可以使用您选择的模态引擎显示您的自定义模态。

于 2013-07-24T17:31:11.753 回答
0

我有类似的要求，我想使用漂亮的 HTML 消息而不是默认的 js 消息。花了一些时间后，我终于找到了一种方法。我使用了 jQuery Colorbox modal，它在任何模态需求中都非常有用，而不仅仅是这里。

基本上您可以使用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给出绝对坐标。很重要！

于 2014-09-24T19:54:46.033 回答