如何个性化警报按钮 - 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

没有。简单回顾一下the docs 可能会有用。 Java 小程序具有类似（但明显不同）样式的 UI 元素，这可能是您过去看到的。

如果您愿意，您可以使用 HTML/CSS/JavaScript 创建自己的对话框，其作用类似于用户代理对话框，但要获得结果需要做很多工作。

Answer 2

简单的回答是不能，提示不支持这个功能，

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

有关想法和示例，请参阅jQuery UI Dialog。

从页面设置示例查看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 3

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

您应该查看具有强大支持且易于定制的开源替代方案。看看BootBoxJS（它依赖于 jQuery）。

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

使用上述软件：

1. 下载js library compressed（包括js、css等）
2. 随意解压文件。
3. 然后复制并粘贴 the example code 并将其另存为 example.html 或任何您想要的。
4. 现在更改链接，使其指向您下载的文件（查看我如何更改 my file）
5. 保存文件并使用您喜欢的浏览器对其进行测试。

我刚刚做了，效果很好！ （在 Firefox 和 Chromium 下）

注意：我用新版本的 BootStrap (v.3) 对其进行了测试，但它不起作用。