JavaScript确认弹窗中使用“是”、“否”按钮代替“确定”和“取消”按钮。

121

如何在Javascript Confirm弹出窗口中显示“是”和“否”按钮而不是“确定”和“取消”?

我已经使用了以下VBScript代码:

<script language="javascript">
    function window.confirm(str) {
        execScript('n = msgbox("' + str + '","4132")', "vbscript");
        return (n == 6);
    }
</script>

这只适用于IE,在FF和Chrome中不起作用。

有没有在Javascript中实现这个的解决方法?

我还想更改弹出窗口的标题,就像在IE中显示“Windows Internet Explorer”一样,我想在这里显示我的应用程序名称。


我自己制作了一个是/否对话框,非常容易自定义:https://github.com/stein189/YesNoDialog 如果你想的话可以试试这个。 - Szenis
10个回答

92

很遗憾,没有跨浏览器支持打开非默认的 OK/Cancel 确认对话框。你提供的解决方案使用了 VBScript,它只在 IE 中可用。

我建议使用能够构建基于 DOM 的对话框的 Javascript 库。尝试一下 Jquery UI:http://jqueryui.com/


19

要在跨浏览器的情况下实现这一点,唯一的方法是使用像jQuery UI这样的框架,并创建一个自定义对话框:

jQuery Dialog

它的工作方式与内置的确认弹出窗口不完全相同,但您应该能够使它做您想要的事情。


7
为了更清晰明确,这不是唯一的方式 - 当然你可以用 Javascript 编写自己的代码,不过那可能并不是正确的做法。 - LeonardChallis
1
@LeonardChallis,但是为了模态Div功能而包含一个大型库会更好吗?我不这么认为。 - nicholaswmin

8
你还可以使用https://github.com/pixel2/jQuery-Easy-Confirm-Dialog-plugin。它非常简单易用。只需包含jQuery通用库和另外一个文件即可。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css" type="text/css" />
<script src="jquery.easy-confirm-dialog.js"></script>

提供的链接已经失效了。 :-( - serverjohn
1
我更新了链接。你可以在GitHub上下载jquery.easy-confirm-dialog.js文件。不过,最后一次提交是10年前的了。 - Quan
哇!我甚至都没注意到这个的年龄。:-) 谢谢你。 - serverjohn

6
你可以使用sweetalert。
导入到你的HTML中:

导入:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

并触发提示:

Swal.fire({
  title: 'Do you want to do this?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, Do this!',
  cancelButtonText: 'No'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Done!',
      'This has been done.',
      'success'
    )
  }
})

欲了解更多数据,请访问sweetalert弹出框网站


5
请看:http://bootboxjs.com/ 非常易于使用:
 bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
});

5

使用confirm()函数或类似的方法不能跨浏览器实现此功能。我强烈建议您使用类似jQuery UI对话框的功能来创建HTML对话框。


4
您可以使用一个小而简单的库JSDialog来创建对话框:js.plus/products/jsdialog 以下是创建带有“是”和“否”按钮的对话框的示例:
JSDialog.showConfirmDialog(
    "Save document before it will be closed?\nIf you press `No` all unsaved changes will be lost.",
    function(result) {
        // check result here
    },
    "warning",
    "yes|no|cancel"
);

JS对话框演示截图

这是一个关于JS对话框的演示截图。

1
嘿,你在哪里下载这个? - Gary
@Gary 链接默认为蓝色下划线文本已经有几十年的历史了。使用鼠标悬停在此答案第一行的蓝色文本上并单击左键。 - Abandoned Cart
1
优质插件并不能帮助程序员。 - Chris Pink

1

未在Edge上进行测试(我不想下载它),但对于Safari,您必须拥有15.4版本(在我的iMac中无法使用)...

这个答案只是一个练习,我将尝试仅使用纯JavaScript解决此问题。

以下是样式练习...

这只创建了一个HTML对话框。:(

    let myDatas;
    let openButton = document.getElementById("showDialog");
    let dialog = document.getElementById("favDialog");
    let form = document.getElementById("form1");
    let yes = document.getElementById("yesBtn");
    let no = document.getElementById("noBtn");
    let fill = document.getElementById("refill");
    let output = document.getElementById("output");
    fillDefaultDatas();
    refill.addEventListener("click",fillDefaultDatas);
    openButton.addEventListener("click",showDiag);
    yes.addEventListener("click",showMe);
    no.addEventListener("click",showMe);
    
    function showDiag(e){
        dialog.showModal();
    }
    function showMe(e){
        var vals = this.value;
        if(vals === "true"){
            deleteDatas();
        }else{
            keepDatas();
        }
        form.reset();
    }
    function displayTextContent(){
        output.textContent=("Object{" + myDatas.firstName + ", " + myDatas.lastName + ", " + myDatas.age + "}");
    }
    function fillDefaultDatas(){
        myDatas={firstName:"John", lastName:"Doe", age:"unknow birthtdate"};
        displayTextContent();
    }
    function deleteDatas(){
        myDatas={firstName:null, lastName:null, age:null};
        displayTextContent();
        return "delete";
    }
    function keepDatas(){
        displayTextContent();
        return "undelete";
    }
        .boldRed{
            font-weight: bold;
            color:#aa0000;
        }
<dialog id="favDialog">
  <form id="form1" method="dialog" action="#">
    <p class="boldRed">
      Are you sure to delete the datas?
    </p>
    <p>
      This choice is not cancelable.
    </p>
    <div>
      <button id="yesBtn" value="true">Yes</button>
      <button id="noBtn" value="false">No</button>
    </div>
  </form>
</dialog>
<p>
    <button id="showDialog">Delete all the datas?</button>
</p>
<div id="output"></div>
<p>
    <button id="refill">Reset the default datas?</button>
</p>


0

1) 您可以在您的网站上下载和上传以下文件

<link href="/Style%20Library/css/smoothness/jquery.alerts.css" type="text/css" rel="stylesheet"/> 

2) 然后您可以直接使用以下代码:

$.alerts.okButton = "是"; $.alerts.cancelButton = "否";

在 document.ready 函数中。

请尝试,它会起作用的。

谢谢。


0

1
你的答案可以通过添加更多支持信息来改进。请[编辑]以添加进一步的细节,例如引用或文档,以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何撰写良好答案的更多信息。 - Community
虽然这个链接可能回答了问题,但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改,仅有链接的答案可能会失效。- 来自审查 - Mario Petrovic

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接