带有自定义按钮的JavaScript确认框 [英] JavaScript confirm box with custom buttons

问题描述

我可以在JavaScript中编写一个自定义确认框，而不是默认的确定和 CANCEL 按钮， a SAVE 和 DELETE 按钮？

解决方案

使用 jQuery UI对话框。

您可以这样做：

JS：

< pre class =snippet-code-js lang-js prettyprint-override> $（function（）{$（＃dialog-confirm）。dialog（{resizable：false，height：auto ，width：400，modal：true，buttons：{Do it：function（）{$（this）.dialog（close）;}，取消：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-confirmtitle =这是叛国罪吗？> < p>< span class =ui-icon ui-icon-alertstyle =float：left; margin：12px 12px 20px 0;>< / span>我是参议院吗？< / p> ;< / div>  

Can I write a custom confirm box in JavaScript that, instead of the default OK and CANCEL button, shows a SAVE and DELETE button?

解决方案

Use the jQuery UI Dialog Box for this.

You can do something like this:

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>

这篇关于带有自定义按钮的JavaScript确认框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！