Display custom alert box like facebook when you navigate to other page

Question

I want to show custom alert box instead of browser default alert box when user tries to navigate from the existing page. Using this code:

 window.onbeforeunload = function(){
    return "are you sure?";
 }

I can use this code to alert user if he has any unsaved data and want to leave page. But I want to make custom alert box with my own design like facebook does. How it is possible? Something like:

 window.onbeforeunload = function(){
    myownalertbox.show();  //here I want to bind leave page or stay on page button with my own button.
 }

And I want to bind stay on this page and leave this page button to my button.

Answer 1

The problem is not with implementing custom alert boxes (as some of the other answers pointing it out), that's not a hard thing to do, there are plenty of solutions, framework, plugin, etc. The problem is JavaScript execution timing.

Using the onbeforeunload handler it's impossible to achieve your goal, because it needs to run "synchronously": you cannot display the alert, return something and then later with some callback get back and return the actual value. When you return from the function, the result will be used by the browser, and you will end up having your custom alert box shown, but the user action will be "lost", because the handler has already been finished.

To go further, I've never been able to find any solution which would provide a custom alert box, which behaves synchronously in this sense. By synchronous behavior I mean that code execution would be blocked until a user clicks on alert buttons. Every custom alert/confirm/prompt solution I've seen was using callbacks. And last but not least JavaScript doesn't even provide a way for kind of a "blocking waiting".

UPDATE

What you can do (and Facebook does it too) is to handle navigation links, buttons, clicks, etc. which you know that will leave the page, and there you can show a custom confirmation box.

Note: Actually I've tried Facebook, and for me (Windows 10, Chrome latest) it prompts the default confirmation box when I tried to close the browser tab, not any custom one. But when I clicked on a link, it indeed showed a custom confirmation box. So to summarize, Facebook, when possible, uses the custom one, and when not possible (only with onbeforeunload, like browser close, tab close, page reload, URL navigation, etc.) it uses the default handling mechanism.

Note 2: For 2016 it seems like all major browsers chose to not let developers customize the message which is shown on onbeforeunload, so your string return value from the handler will not be taken as the message. There are several articles about this. The main reason is safety, as lots of sites used it for tricking naive users and asking them do do some actions, or prompting them malicious content, etc. Now all major browsers display a default message about possibly having unsaved changes.