JavaScript自定义按钮的确认框

Question

我能否在JavaScript中编写自定义确认框, 以显示“保存”和“删除”按钮，而不是默认的“确认”和“取消”按钮?

- Hector Barbossa

---

可能是 javascript confirm 对话框中的自定义选项 的重复问题。 - kennytm

我建议不要使用JavaScript的confirm()、alert()或prompt()命令，因为它们会阻塞整个浏览器线程（在大多数浏览器中）。你应该使用JavaScript-UI替代方案。 - jwueller

Answer 1

使用jQuery UI对话框来完成此操作。

您可以像这样做：

JS:

$(function() {
  $("#dialog-confirm").dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
      "Do it": function() {
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  });
});

<link href="https://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css" rel="stylesheet"/>
  
<link href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<div id="dialog-confirm" title="Is it treason, then?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Am I the Senate?</p>
</div>

- Tim Schmelter

Answer 2

不使用原生的JavaScript确认框。相反，您可以使用模拟模态对话框的许多JavaScript UI组件来完成此操作。

以下是一个示例：https://jqueryui.com/dialog/#modal-confirmation 我从未使用过这个，因此请自行承担风险。

- Tim Down

---

链接已失效。 - Petr

Answer 3

$('confirm text').dialog(
    {
        modal:true, //Not necessary but dims the page background
        buttons:{
            'Save':function() {
                //Whatever code you want to run when the user clicks save goes here
             },
             'Delete':function() {
                 //Code for delete goes here
              }
        }
    }
);

这应该可以运行，但你需要下载或链接到jQuery和jQuery UI库才能运行它。

- Belinda