如何使用CSS设置警报框的样式？ [英] How do I style the alert box with CSS?

问题描述

- 更新 - 我已经阅读了很多关于该主题尝试了几个脚本，需要帮助找出你可以或不能做。社区回答一切，以下是一个很好的起点。 （此处的回答摘自以下社区，谢谢）

1. 您无法覆盖默认的警报类型。它由您的客​​户端（例如chrome firefox等）生成




2. 您可以使用jquery。而不是像下面这样的脚本：

   
   
   

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

这使得客户端（firefox chrome等）生成警报框。

2b。你告诉代码如果有事情需要发生在事件加载jquery alertbox你可以使漂亮：（由Jonathan Payne回答，由Jonathan Payne创建。谢谢）

 < link rel =stylesheethref =http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.csstype =text / cssmedia =all/> 
 
< div onclick =check_domain_input（）>点击< / div> 
 
< div id =dialogtitle =注意！ style =display：none> 
请输入要搜索的域名。 
< / div> 
 
< script> 
 function check_domain_input（）
 {
 $（#dialog）.dialog（）; //显示新的警报框。 
 
 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/

解决方案

尝试 jQuery UI 位于此处： http://jqueryui.com/demos/dialog/

他们有一个主题滚轮，您可以在其中设置对话框和模态框。

- EDIT -

回答您的第二个问题。

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

 < link rel =stylesheethref =http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.csstype =text / cssmedia = all/> 
 
< div onclick =check_domain_input（）>点击< / div> 
 
< div id =dialogtitle =注意！ style =display：none> 
请输入要搜索的域名。 
< / div> 
 
< script> 
 function check_domain_input（）
 {
 $（#dialog）.dialog（）; //显示新的警报框。 
 
 var domain_val = document.getElementsByName（'domain'）; 
 
 if（domain_val [0] .value.length> 0）
 {
 return true; 
} 
 
 $（#dialog）.dialog（）; 
 
 return false; 
} 
< / script> 
  

-- 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)

1. YOU CAN NOT OVERIDE DEFAULT STYLE OF ALERT. It is produced by your client (eg. chrome firefox etc)

2. 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; }

which makes the client (firefox chrome etc) produce an alert box.

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)

<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/

解决方案

Try jQuery UI located here: 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/

<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>

​

这篇关于如何使用CSS设置警报框的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！