Javascript 如何个性化警报按钮-window.confirm（）和window.alert（）

我看到很多网站都用不同的按钮文本个性化了他们的提醒和确认框

默认情况下，这是JavaScript

window.confirm（）

函数将输出的内容：

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

但是，如果我想要一些定制，比如自定义标题文本和自定义按钮文本呢

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

这可以通过JavaScript、Jquery或AJAX（或其他语言）实现吗？如果是这样，你能给我举个例子吗？谢谢

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

---

如果您愿意，您可以使用HTML/CSS/JavaScript创建自己的对话框，就像用户代理对话框一样，但这需要做大量的工作。

简单的答案是您不能，提示不支持此功能

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

有关想法和示例，请参见g

从页面设置示例，查看

HTML:

CSS太大，无法发布，但您可以链接此文件：

---

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

您应该看看具有强大支持和易于定制的开源替代方案。看一看（这取决于jQuery）

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

要使用上述软件，请执行以下操作：

下载（包括js、css等）

解压你想要的文件

然后复制粘贴并保存为

example.html

或任何您想要的内容

现在更改链接，使其指向您下载的文件（请参见我如何更改）

保存文件并使用首选浏览器进行测试

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

---

注意：我用新版本的BootStrap（v.3）测试了它，但它不工作。

你确定吗？我以前见过这种情况。。。。它不必与JS、JQ或AJAX一起使用。。。任何其他语言都可以，你的问题被标记为

javascript

，所以我的答案适用于javascript。您最好的选择是制作自己的模式弹出窗口。考虑jQuery UI：FWIW jQuery和Ajax不是语言，这是可能的。这个网站上有几篇文章，你可以在那里找到有用的信息。e、 g.：@Madbreaks什么是FWIW？无论如何，你知道我的意思；）感谢你所做的一切，谢谢！我会查一查的！那么，那些其他网站当时没有使用JavaScript？是的，他们使用它，只是他们没有使用navite提示，他们可能使用了带有覆盖或modalOh的自定义脚本，你能告诉我如何使用模态或覆盖吗？还是会更难？谢谢，我刚刚添加了一个JSFIDLE和代码，但实际上您应该阅读文档，这是一个相当简单的问题，很高兴听到您让它工作了！嘿@Lucio，我真的很喜欢这个配给。但是我不能让它工作！您能给出一些安装步骤吗？请参阅我的更新答案。我自己测试了一下。希望，将是有用的：）：）此外，我找不到哪里下载压缩的js库。。。那个链接把我带到了主页哦，伙计们，你太模糊了。你需要阅读更多：）@pattyd我创建了进一步解释。

<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>

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