Question

When I close my page on some browser I want a message box to appear and to ask me if I really want to close the page or not, with two buttons and if I click No then this tab won’t be closed.

How can I do that?

Answer 1

You need to listen on the beforeunload event.

Here’s a kickoff example:

window.onbeforeunload = function() {
    return "Hey, you're leaving the site. Bye!";
};

This message will show up in kind of a confirmation dialogue. This message will show up right before the client unloads the page. That can be a browser close, but that can also be a simple navigational action like clicking a link or submitting a form in the page!

You would most probably also like to turn it off (just set to null) whenever an internal link is clicked or an internal form is submitted. You namely don’t want to annoy endusers with unintuitive behaviour. You can do that by listening on the click event of the desired links and the submit event of the desired forms. jQuery may be of great help here since it does that in crossbrowsercompatible way so that you don’t need to write >20 lines of JS code for this:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    window.onbeforeunload = function() {
        return "You're leaving the site.";
    };
    $(document).ready(function() {
        $('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
        $('form').submit(function() { window.onbeforeunload = null; });
    });
</script>

You only need to give all external links the defacto standard attribute rel="ext" to denote that those are external links.

<a href="http://google.com" rel="ext">Google</a>