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

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

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

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

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

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

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

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

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

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

确认个性化对话

要使用上面提到的软:

  1. 下载压缩的js库 (包括js,css等)
  2. 无论你想要解压缩文件。
  3. 然后复制并粘贴示例代码并将其保存为example.html或任何您想要的内容。
  4. 现在更改链接以使其指向您下载的文件(请参阅我如何更改文件 )
  5. 保存文件并使用首选浏览器进行测试。

我刚刚做到了,它完美无缺! (在Firefox和Chromium下)

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

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

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

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

从页面设置示例检查jsfiddle

HTML:

 

These items will be permanently deleted and cannot be recovered. Are you sure?

Sed vel diam id libero rutrum convallis. 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.

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

不可以 。 对文档的简单回顾可能很有用。 Java applet具有类似(但截然不同)的样式UI元素,可能是您过去看到的。

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