javascript - 风格化 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)

但我知道不可能改变警报框的样式，所以我尝试使用 jQuery UI 对话框():

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

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

return ' ';
});

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

如何解决这个问题？

Answer 1

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

window.onbeforeunload = null As explained here

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