Question

I’m working on a requirement to show a warning box if the user is about to leave a page with unsaved changes. This is the code:

$(function() {
    $(':input',document.myForm).change(function() { 
        window.onbeforeunload = function() {
            return "Are you sure you want to leave this page? You have unsaved changes!";
        }
    });

    $('form').submit(function() {
        window.onbeforeunload = function() { };
    });
});

Everything functions fine, however, the text and the popup box get overridden by the browser. I’ve tried IE and Firefox, but they both seem to override my text and use their built-in warning popup. Is there a way around this to display a popup with my text and a jQuery dialog that I can configure?

Answer 1

AFAIK there’s no way to override the onbeforeunload look and feel UI implementation. The best you could do (as a web developer) is return a string. The way this string is presented to the user is absolutely out of your control and it is browser dependent. For example if you are writing a .NET desktop application and using the WebBrowser control (which is a wrapper around IE) it is up to you to implement and handle this method.

So you can basically forget about jQuery UI dialogs unless you are writing a custom browser extension.