如何使用CSS设置警报框的样式？

Question

- 更新 - 我已经阅读了很多关于这个主题的尝试了一些脚本,并需要帮助来找出你能做什么或不能做什么.社区回答了这一切,以下是一个很好的起点.(这里的答案摘自社区,谢谢)

1. 你不能超越默认的警告风格.它由您的客​​户生产(例如chrome firefox等)

2. 你可以使用jquery代替.而不是使用如下脚本:

   function check_domain_input(){var domain_val = document.getElementsByName('domain'); if(domain_val [0] .value.length> 0){return true; 警报('请输入要搜索的域名.'); 返回false; }

这使得客户端(firefox chrome等)产生一个警告框.

2B.你告诉代码是否需要在事件加载jquery alertbox上发生一些事情,你可以做得很漂亮:(由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>

在这里查看jsFiddle:http://jsfiddle.net/8cypx/12/

Answer 1

试试jQuery UI这里:http://jqueryui.com/demos/dialog/

它们有一个主题滚轮,您可以在其中设置对话框和模态框的样式.

- 编辑 -

回答你的第二个问题.

在这里查看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>

​

Answer 2

而不是内置的Javascript对话框弹出窗口 - 这是丑陋的,无法用CSS自定义 - 我建议使用jQuery对话框控件.这些可以轻松设置样式,jQuery也附带了许多内置主题.

http://docs.jquery.com/UI/Dialog