How to prevent browser tab/window close when I'm in onbeforeunload event?

Question

I want to show a custom Are you sure you want to leave this page? dialog box (in ExtJs) in the window.onbeforeunload event. I am familiar with the fact that if I return a string from this method, it would show a "browser" pop up with the returned message on it; however, I don't want the regular pop up at all.

Now, the issue is that as soon as window.onbeforeunload function finishes executing, ExtJs dialog box or anything on the screen doesn't matter anymore and the browser tab closes. I tried stopImmediatePropagation, stopPropagation methods and setting cancelBubble property to true. However, nothing seems to work. I'm sorry, I don't even know if they are supposed to work.

Here is the code:

window.onbeforeunload = function(e){

    Ext.Msg.show({
        title:'Warning',
        msg: 'Are you sure?',
        buttons: Ext.Msg.YESNO,
        icon: Ext.Msg.QUESTION,
        fn: function (btn) {
            if (btn == 'yes') {
                //Close Browser Window
            }
        },
        modal: true
    });

    //A desperate attempt to stop window/tab from closing
    e.stopPropagation();
    e.cancelBubble = true;
    e.stopImmediatePropagation();

    //This brings up default browser pop up
    //return 'Message';
};

I'm sorry, I won't be able to create a Sencha Fiddle because it has it's own Confirm Navigation dialog box.

I want to know if it's possible to implement this? If yes, then how?

Thank you so much.

Answer 1

Here is an explanation about this no choice to make a custom (extjs etc) dialog