带有自定义按钮的 JavaScript 确认框

Question

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

Answer 1

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>

Answer 2

Not with the native JavaScript confirm box. You could use one of the many JavaScript UI components that emulate modal dialogs to do this instead.

Here's an example: https://jqueryui.com/dialog/#modal-confirmation

I've never used this so use at your own risk.

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

This should work, but you will need to download or link to jQuery and the jQuery UI libraries to run this.