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

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

使用上述软件：

1. 下载js library compressed（包括js，css等）
2. 根据需要解压缩文件。
3. 然后复制并粘贴the example code并将其保存为example.html或您想要的任何内容。
4. 现在更改链接，使其指向您下载的文件（请参阅我如何更改my file）
5. 保存文件并使用首选浏览器进行测试。

我刚刚做到了，它完美无缺！ （在Firefox和Chromium下）

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

Answer 3

没有。对the docs的简单回顾可能很有用。 Java applet具有类似（但截然不同）的样式UI元素，可能是您过去看到的。

如果您愿意，可以使用类似用户代理对话框的HTML / CSS / JavaScript创建自己的对话框，但这对结果来说是很多工作。