Question

我正在尝试创建并设置用户尝试离开页面时出现的退出弹出窗口（边框，背景，字体）。这是脚本的一个例子：

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

但是我知道改变alertbox的风格是不可能的，所以我尝试使用jQuery UI对话框（）：

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

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

return ' ';
});

不幸的是，由于对话框与警报功能不同，因此无法正常工作。对话框与确认框同时显示。

我该如何解决这个问题？

Answer 1

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

window.onbeforeunload = null As explained here

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

Answer 2

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

样式化Javascript退出弹出窗口

2 个答案: