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

时间:2012-07-17 18:43:20

标签: jquery css

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

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

  2. 您可以使用jquery代替。而不是使用像:

    这样的脚本

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

  3. 使客户端(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/

5 个答案:

答案 0 :(得分:8)

点击此处的jQuery UIhttp://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>

答案 1 :(得分:6)

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

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

答案 2 :(得分:2)

如果我对你提出正确的问题,我认为你不能这样做,因为弹出窗口连接到客户端系统。但是,设计你所描述的并不那么难,查看DIV元素或其他东西。

答案 3 :(得分:1)

确认/提示框是浏览器的一部分,而不是您的页面。

答案 4 :(得分:1)

使用以下插件http://plugins.jquery.com/msgbox/
并使用代码

  

$警报(&#39;文本&#39;);

而不是提醒(&#39; text&#39;);使用css自定义