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

前端 未结 2 1225
星月不相逢
星月不相逢 2020-11-27 20:41

I\'m showing a confirmation alert box through JavaScript:

function checked() {
 if (hdnval.toLowerCase() != textbox1.toLowerCase()) {
  var save = window.con         


        
相关标签:
2条回答
  • 2020-11-27 21:36

    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)
    }
    
    0 讨论(0)
  • 2020-11-27 21:39

    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>
    
    0 讨论(0)
提交回复
热议问题