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

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:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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:

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

<html><head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css" rel="nofollow noreferrer noopener">
    <link rel="stylesheet" type="text/css" href="/css/result-light.css" rel="nofollow noreferrer noopener">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="nofollow noreferrer noopener">
</head>
<body>
    <a class="checked" href="http://www.google.com" rel="nofollow noreferrer noopener">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>

Method 2

If you don’t want to use a separate JS library to create a custom control for that, you could use two confirm dialogs to do the checks:

if (confirm("Are you sure you want to quit?") ) {
    if (confirm("Save your work before leaving?") ) {
        // code here for save then leave (Yes)
    } else {
        //code here for no save but leave (No)
    }
} else {
    //code here for don't leave (Cancel)
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x