如何个性化警报按钮 - window.confirm()和window.alert()

Question

我见过很多网站都使用不同的按钮文字来个性化他们的警报和确认框.

默认情况下,这是JavaScript window.confirm()函数输出的内容:

+-----------------------------+
|Message from webpage         |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [Ok]     [Cancel]         |
+-----------------------------+

但是,如果我想要一些自定义标题文本和自定义按钮文本的自定义怎么办？

+-----------------------------+
|My custom Header             |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [HELLO]     [GOODBYE]     |
+-----------------------------+

这可以用JavaScript,Jquery或AJAX(或其他语言)实现吗？如果是的话,你能告诉我一个例子吗？谢谢!

Answer 1

简单的答案就是你不能,提示不支持这个功能,

但是,您可以使用Jquery或构建自己的模式/对话框来模拟此功能.

有关想法和示例,请参阅jQuery UI Dialo g.

从页面设置示例检查jsfiddle

HTML:

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

JS

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

CSS是大到发布,但你可以链接这个文件:

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css

Answer 2

我不会在这里发现任何新东西。创建的评论会列出所有最相关的信息。

您应该查看具有强大支持且易于自定义的开源替代方案。看一下BootBoxJS（取决于jQuery）。

在该站点中，您可以找到警报，对话框和其他有用工具的示例。例如

要使用上述软件：

1. 下载压缩的js库（包括js，css等）
2. 随便解压缩文件。
3. 然后复制并粘贴示例代码，然后将其另存为example.html。
4. 现在更改链接，使其指向您下载的文件（请参阅我如何更改文件）
5. 保存文件并使用您喜欢的浏览器进行测试。

我只是做到了，而且效果很好！（在Firefox和Chromium下）

注意：我已使用新版本的BootStrap（v.3）对其进行了测试，但无法正常工作。