How to override the default popup box of onbeforeunload function

Question

I want to customize the default box to display my own fancybox form to make customer to subscribe for my website.

In the below code, first it's displaying the default dialog box and then my form is displaying. But I want to display my fancybox first. I tried like below. But I can't achieve output what I expected. How can i solve this?

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

If you simply return the function, it will pop up the default confirm box.

All you have to do is figure out when exactly will you want your 'fancy box' to be replaced by the default confirm box, and then return the message.

So instead of going straight to returning, wait for the user to make an action (subscribe/not subscribe) and then return the message.

Perhaps you could create a global bool and return the message in the beforeunload event only if the bool is true .

If you cannot or don't want to detect when they make an action, you could just place a timer; it's totally up to you.