Question

Just wondering, is it possible to create an alert with multiple options?

Like for example, in Facebook, when you try to close the tab/window when you have not finished typing your message, an alert with the options "Leave this page" and "Stay on this page" will pop up.

Was it helpful?

Solution

Example with form, you'are looking for window.onbeforeunload:

<script type="text/javascript">
var originalFormContent
var checkForChanges = true;

jQuery(document).ready(function () {
    originalFormContent = jQuery('#myForm input[type=text]').serialize() +      jQuery('#myForm select').serialize();
});

function onClose() {

    if (checkForChanges && originalFormContent != "undefined") {
        var content = jQuery('#myForm input[type=text]').serialize() + jQuery('#myForm select').serialize();
        if (content != originalFormContent) {

            return confirm('You have unsaved changes.  Click OK if you wish to continue ,click Cancel to return to your form.');
        }
    }

}

window.onbeforeunload = onClose(); 

OTHER TIPS

You're referring to window.onbeforeunload:

Best way to detect when a user leaves a web page?

You can also use the window.confirm() function for OK/Cancel options:

http://jsfiddle.net/UFw4k/1

Other than that, you'd have to implement a custom modal alert, such as jQuery Dialog.

Please have a look at http://jqueryui.com/dialog/#default

Copied this from a previous answer: JavaScript alert with 3 buttons

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top