jQuery 如何使用 CSS 设置警告框的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11528845/
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 do I style the alert box with CSS?
提问by david
-- Update --i have read a lot on the subject tried a few scripts and needed help to find out what you can or cant do. Community answered it all and the following is a good starting point. (answers here extracted from community below, thank you)
-- 更新 -- 我已经阅读了很多关于这个主题的文章，尝试了一些脚本，需要帮助来找出你能做什么或不能做什么。社区回答了所有问题，以下是一个很好的起点。（这里的答案摘自以下社区，谢谢）
YOU CAN NOT OVERIDE DEFAULT STYLE OF ALERT. It is produced by your client (eg. chrome firefox etc)
you can use jquery instead. Instead of using a script like:
function check_domain_input() { var domain_val = document.getElementsByName('domain'); if (domain_val[0].value.length > 0) { return true; } alert('Please enter a domain name to search for.'); return false; }
您不能超越警报的默认样式。它由您的客户生成（例如 chrome firefox 等）
您可以改用 jquery。而不是使用像这样的脚本：
function check_domain_input() { var domain_val = document.getElementsByName('domain'); if (domain_val[0].value.length > 0) { return true; } alert('请输入要搜索的域名。'); 返回假；}
which makes the client (firefox chrome etc) produce an alert box.
这使得客户端（firefox chrome 等）产生一个警告框。
2b. You tell the code if somethings needs to happen on a event load jquery alertbox which you can make pretty: (Answered by Jonathan Payne and created by Jonathan Payne. Thank you)
2b. 您告诉代码是否需要在事件加载 jquery 警报框上发生某些事情，您可以使它变得漂亮：（由 Jonathan Payne 回答并由 Jonathan Payne 创建。谢谢）
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />
<div onclick="check_domain_input()">Click</div>
<div id="dialog" title="Attention!" style="display:none">
Please enter a domain name to search for.
</div>
<script>
function check_domain_input()
{
$( "#dialog" ).dialog(); // Shows the new alert box.
var domain_val = document.getElementsByName('domain');
if (domain_val[0].value.length > 0)
{
return true;
}
$( "#dialog" ).dialog();
return false;
}
</script>
Check out the jsFiddle here: http://jsfiddle.net/8cypx/12/
在此处查看 jsFiddle：http: //jsfiddle.net/8cypx/12/
回答by Jonathan Payne
Try jQuery UIlocated here: http://jqueryui.com/demos/dialog/
尝试jQuery UI位于此处：http: //jqueryui.com/demos/dialog/
They have a theme roller where you can style the dialog and modal boxes.
他们有一个主题滚轮，您可以在其中设置对话框和模式框的样式。
-- EDIT --
- 编辑 -
Answering your second question.
回答你的第二个问题。
Check out the jsFiddle here: http://jsfiddle.net/8cypx/12/
在此处查看 jsFiddle：http: //jsfiddle.net/8cypx/12/
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />
<div onclick="check_domain_input()">Click</div>
<div id="dialog" title="Attention!" style="display:none">
Please enter a domain name to search for.
</div>
<script>
function check_domain_input()
{
$( "#dialog" ).dialog(); // Shows the new alert box.
var domain_val = document.getElementsByName('domain');
if (domain_val[0].value.length > 0)
{
return true;
}
$( "#dialog" ).dialog();
return false;
}
</script>
?
?
回答by Alex Weinstein
Instead of built-in Javascript dialog box popups - that are ugly and impossible to customize with CSS - I would recommend using jQuery dialog box controls. Those can be styled easily, and jQuery ships with many built-in themes for it, too.
我建议使用 jQuery 对话框控件，而不是内置的 Javascript 对话框弹出窗口——那是丑陋且无法用 CSS 自定义的。这些可以很容易地设置样式，jQuery 也为它提供了许多内置主题。
回答by Konrad Viltersten
If i got you question correctly, i don't think you can do that, since the pop-ups are wired into the system of the client. However, designing what you described isn't that hard, viewing a DIV element or something.
如果我的问题是正确的，我认为您不能这样做，因为弹出窗口已连接到客户端的系统中。但是，设计您描述的内容并不难，查看 DIV 元素或其他内容。
回答by Abhishek Mehta
The confirm/alert box is part of the browser not your page.
确认/警报框是浏览器的一部分，而不是您的页面。
回答by Shan
Use the below plugin http://plugins.jquery.com/msgbox/
and use the code
使用下面的插件 http://plugins.jquery.com/msgbox/
并使用代码
$.alert('text');
$.alert('文本');
instead of alert('text'); Customize with css
而不是 alert('text'); 用 css 自定义
