如何显示具有“是”、“否”和“取消”三个按钮的确认提示，就像MS Word中显示的那样。

Question

如何显示具有“是”、“否”和“取消”三个按钮的确认提示，就像MS Word中显示的那样。

34

我通过JavaScript显示一个确认提示框：

function checked() {
 if (hdnval.toLowerCase() != textbox1.toLowerCase()) {
  var save = window.confirm('valid')
   if (save == true) 
   {
     return true;
   }
   else
    {
      return false;
    }
 }
}

确认警告框显示两个按钮：确定和取消。

我想在我的确认警告框中显示第三个按钮。我希望三个按钮如下所示：“是”、“否”、“取消”，就像在MS Word中显示的那样。

- Rocky

很确定这里没有太多选择。另外，“No”和“Cancel”有什么不同？ - Brian Driscoll

1

@BrianDriscoll：OP可能想要为“否”定义自定义逻辑。例如，用户单击“关闭”：对话框会显示“在离开之前，您是否要保存您的工作？”是：保存并关闭，否：不保存而关闭，取消：保持工作处于打开状态。 - StriplingWarrior

@Brian Driscoll: StriplingWarrior 是对的，是表示保存，否则表示不保存并转到其他选项卡，取消表示不保存但留在同一页。 - Rocky

我在我的应用程序中多次调用这个JavaScript函数。 - Rocky

2个回答

35

如果您不想使用单独的JS库来创建自定义控件，您可以使用两个confirm对话框进行检查：

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)
}

- David Millar

最简单的解决方案总是我最喜欢的！ - Charlie Dalsass

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- StriplingWarrior · Accepted Answer

使用原生的JavaScript对话框无法实现此功能，但是许多JavaScript库包含更灵活的对话框。您可以使用类似jQuery UI 的对话框这样的库来实现此功能。

也请参阅以下非常相似的问题：

下面是一个示例，可以在这个 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>