Onbeforeunload Confirmation Screen Customization

Is it possible to create a custom confirmation box for the onbeforeunload event in a browser? I tried but then I get 2 confirmation boxes (one from me which is nothing more than re

Solution 1:

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefoxif (e) {
    e.returnValue = message;
  }

  // For Safarireturn message;
};

Please note: Most browsers put this message after some other text. You do not have complete control of the content of the confirmation dialog.

Solution 2:

No, you can't avoid the standard one from the browser. All you can do is inject some custom text into it; if you use the following event handler (registered the prototype lib way):

Event.observe(window, "beforeunload", function(event) {
    if (showMyBeforeUnloadConfirmation)
        event.returnValue = "foo bar baz";
});

(and showMyBeforeUnloadConfirmation is true) you'll get the browser's standard confirmation with the following text:

Are you sure you want to navigate away from this page?

foo bar baz

Press OK to continue, or Cancel to stay on the current page.

[ OK ] [ Cancel ]

Solution 3:

I faced the same problem, I was able to get its own dialog box with my message, but the problems I faced were:

1. It was giving message on all navigations and I wanted it only for close click.
2. With my own confirmation message if user selects "Cancel", it still shows the browser's default dialog box.

Following is the solutions code I found, which I wrote on my Master page.

functioncloseMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event;
    }
    if (evt && evt.clientX >= (window.event.screenX - 150) && evt.clientY >= -150 && evt.clientY <= 0) {
        return"Do you want to log out of your current session?";
    }
}

window.onbeforeunload = closeMe;