jQuery 如何个性化警报按钮 - window.confirm() 和 window.alert()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16929370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to personalize alert buttons - window.confirm() and window.alert()
提问by pattyd
I have seen many websites that have personalized their alert and confirmation boxes with different button text.
我看到许多网站都使用不同的按钮文本个性化了警报和确认框。
By default, this is what the JavaScript window.confirm()function would output:
默认情况下，这是 JavaScriptwindow.confirm()函数将输出的内容：
+-----------------------------+
|Message from webpage |
+-----------------------------+
|Popup text |
| |
| |
| |
| |
| [Ok] [Cancel] |
+-----------------------------+
But, what if I wanted some customization like custom header text, and custom button text?
但是，如果我想要一些自定义设置，例如自定义标题文本和自定义按钮文本，该怎么办？
+-----------------------------+
|My custom Header |
+-----------------------------+
|Popup text |
| |
| |
| |
| |
| [HELLO] [GOODBYE] |
+-----------------------------+
Can this be achieved in JavaScript, Jquery, or AJAX (or another language)? If so, could you please show me an example? Thanks!
这可以在 JavaScript、Jquery 或 AJAX（或其他语言）中实现吗？如果是这样，你能给我举个例子吗？谢谢！
采纳答案by Lucio
I wont discover anything new here. And the comments created say all the most relevant information.
我不会在这里发现任何新东西。创建的评论说明了所有最相关的信息。
You should look at open source alternatives that have great support and are easy to customize. Take a look at BootBoxJS(it depends on jQuery).
您应该查看具有强大支持且易于定制的开源替代方案。看看BootBoxJS（它取决于 jQuery）。
In that site you can find examples of alerts, dialogs, and other useful tools. e.g.
在该站点中，您可以找到警报、对话框和其他有用工具的示例。例如
To use the mentioned soft:
要使用提到的软：
- Download the js library compressed(including js, css, etc)
- Unzip the file whatever you want to.
- Then copy and paste the example codeand save this as
example.htmlor whatever you want to. - Now change the links to make it point to your downloaded files (see how I changed my file)
- Save the file and test it with your preferred browser.
- 下载压缩后的js库（包括js、css等）
- 解压缩任何你想要的文件。
- 然后复制并粘贴示例代码并将其另存为
example.html或任何您想要的。 - 现在更改链接以使其指向您下载的文件（查看我如何更改我的文件）
- 保存文件并使用您首选的浏览器进行测试。
I just did it and it works perfect! (Under Firefox and Chromium)
我刚刚做到了，而且效果很好！（在 Firefox 和 Chromium 下）
NOTE: I tested it with the new version of BootStrap (v.3) and it doesn't work.
注意：我使用新版本的 BootStrap (v.3) 对其进行了测试，但它不起作用。
回答by isJustMe
The simple answer is that you can't , prompts do not support this feature,
简单的回答是不能，提示不支持这个功能，
However you could use Jquery or build your own modal/ dialog to emulate this functionality.
但是，您可以使用 Jquery 或构建自己的模式/对话框来模拟此功能。
See the jQuery UI Dialog for ideas and examples.
有关想法和示例，请参阅jQuery UI 对话框。
Setting up the example from the page check out the jsfiddle
从页面设置示例查看jsfiddle
HTML:
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
JS
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
The CSS is to large to post, but you can link this file :
CSS太大无法发布，但您可以链接此文件：
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
回答by Madbreaks
No. A simple review of the docsmay be useful. Java applets have similarly (but distinctly different) styled UI elements that may be what you've seen in the past.
不。对文档的简单回顾可能会有用。Java 小程序具有类似（但明显不同）样式的 UI 元素，这些元素可能是您过去所见过的。
If you wanted to you could create your own dialog boxes using HTML/CSS/JavaScript that act like user agent dialog boxes, but that's a lot of work for the result.
如果您愿意，您可以使用 HTML/CSS/JavaScript 创建您自己的对话框，这些对话框的作用类似于用户代理对话框，但这需要大量工作才能获得结果。
