程式化Javascript退出弹出窗口

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 dialog（）：

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

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

return ' ';
});

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

我怎么解决这个问题？

Answer 1

您可以通过使onbeforeunload事件无效来尝试禁用本机出口模式。

window.onbeforeunload = null 所述

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

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给出绝对坐标。 很重要！