Question

24

how to show confirmation alert with three buttons 'Yes' 'No' and 'Cancel' as it shows in MS Word

rated 0 times [ 29] [ 5] / answers: 1 / hits: 129071 / 13 Years ago, wed, february 1, 2012, 12:00:00

I'm showing a confirmation alert box through JavaScript:

function checked() {

 if (hdnval.toLowerCase() != textbox1.toLowerCase()) {

  var save = window.confirm('valid')

   if (save == true) 

   {

     return true;

   }

   else

    {

      return false;

    }

 }

}

The confirmation alert is showing with two buttons: OK and Cancel.

I want to show a third button in my confirmation alert. I want the three buttons to be like this: 'Yes' 'No' 'Cancel', as it shows in MS Word.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alysas

Add To Favorites

Follow

Total Points: 616

Total Questions: 111

Total Answers: 124

Location: Slovenia

Member since Wed, Apr 6, 2022

2 Years ago

answered 13 Years ago domeniccolti · Accepted Answer

This cannot be done with the native javascript dialog box, but a lot of javascript libraries include more flexible dialogs. You can use something like jQuery UI's dialog box for this.

See also these very similar questions:

JavaScript confirm box with custom buttons

custom choices in javascript confirm dialog

Here's an example, as demonstrated in this jsFiddle:

<html><head>

    <script type=text/javascript src=http://code.jquery.com/jquery-1.7.1.js></script>

    <script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js></script>

    <link rel=stylesheet type=text/css href=/css/normalize.css>

    <link rel=stylesheet type=text/css href=/css/result-light.css>

    <link rel=stylesheet type=text/css href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css>

</head>

<body>

    <a class=checked href=http://www.google.com>Click here</a>

    <script type=text/javascript>



        $(function() {

            $('.checked').click(function(e) {

                e.preventDefault();

                var dialog = $('<p>Are you sure?</p>').dialog({

                    buttons: {

                        Yes: function() {alert('you chose yes');},

                        No:  function() {alert('you chose no');},

                        Cancel:  function() {

                            alert('you chose cancel');

                            dialog.dialog('close');

                        }

                    }

                });

            });

        });



    </script>

</body><html>