6

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.

chris97ong
  • 6,870
  • 7
  • 32
  • 52
  • 1
    possible duplicate of [JavaScript alert with 3 buttons](http://stackoverflow.com/questions/2054082/javascript-alert-with-3-buttons) – Andy Mar 28 '14 at 10:24
  • @Andy But you can't name `confirm()` options. – chris97ong Mar 28 '14 at 10:25
  • @Andy Then how did the creator of the Facebook site do it? How did he give the alert two options that have names besides "Ok" and "Cancel"? – chris97ong Mar 28 '14 at 10:28

3 Answers3

5

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();

radia
  • 1,456
  • 1
  • 13
  • 18
4

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.

Community
  • 1
  • 1
Curtis
  • 101,612
  • 66
  • 270
  • 352
0

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

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

Community
  • 1
  • 1
Alexander Grooff
  • 63
  • 6
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – the Tin Man May 24 '20 at 04:54