13

我看到许多网站都使用不同的按钮文本个性化了他们的警报和确认框。

默认情况下，这是 JavaScriptwindow.confirm()函数将输出的内容：

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

但是，如果我想要自定义标题文本和自定义按钮文本等自定义内容怎么办？

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

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

4

3 回答 3

6

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

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

有关想法和示例，请参阅jQuery UI 对话框。

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

于 2013-06-05T00:06:13.370 回答
6

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

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

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

确认对话框个性化

要使用上述软件：

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

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

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

于 2013-06-05T00:15:12.930 回答
1

不会。对文档进行简单的审查可能会有用。Java 小程序具有类似（但明显不同）样式的 UI 元素，这可能是您过去看到的。

如果您愿意，您可以使用 HTML/CSS/JavaScript 创建您自己的对话框，这些对话框的作用类似于用户代理对话框，但这需要大量工作。

于 2013-06-05T00:00:49.063 回答