如何覆盖onbeforeunload函数的默认弹出框

Question

我想自定义默认框以显示我自己的fancybox表单，以使客户订阅我的网站。

在下面的代码中，首先显示默认对话框，然后显示我的表单。 但我想先显示我的fancybox。 我尝试如下。 但是我无法实现预期的输出。 我该如何解决？

$(document).ready(function () {
    // Shadow box initialization
    Shadowbox.init({
        handleOversize: "resize",
        overlayOpacity: 0.9
    });

    // This makes sure that the pop up isn't shown
    // if the user is navigating within the website
    $(window).click(function () {
        window.onbeforeunload = null;
    });
    window.onbeforeunload = function (e) {
        //console.log(Event);
        //e.preventDefault();
        //e.defaultPrevented();

        //open thickbox
        Shadowbox.open({
            content: '<div id="welcome-msg">Welcome to my website!</div>',
            player: "html",
            width: 540,
            height: 380
        });
        return 'You have unsaved changes!';
    }
});

Answer 1

如果仅返回该函数，它将弹出默认的确认框。

您所要做的就是弄清楚何时将您的“精美框”替换为默认的确认框，然后返回消息。

因此，与其直接返回，不等用户进行操作（订阅/不订阅）， 然后返回消息。

也许您可以创建一个全局bool并且仅当布尔为true才在beforeunload事件中返回消息。

如果您不能或不想检测他们何时采取行动，则可以放置一个计时器。 这完全取决于您。