recherche

Maison >interface Web >tutoriel HTML >CSS遮罩层的实现_html/css_WEB-ITnose

CSS遮罩层的实现_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:52:021920parcourir

偶然发现自己原来写了一个CSS遮罩层，虽然这个东西没什么技术含量，但如果本人离开公司后又遇见此类问题，那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。 
直接上代码吧。 
第一步，html代码： 

Java代码  

  1.   
  2.    
      
  3.       
  4.        CSS遮罩层的实现_html/css_WEB-ITnose  
  5.        
  6.     
  
  •     
      
    •   
  •                                   
  •   
  •   
  • 《挂号须知》  
    •   


    上面的代码由三部分构成，popDiv表示弹出层，即单击“挂号须知”链接时弹出。 
    而bg表示遮罩层，即弹出层显示时将层后面的内容遮住。最后就是指显示的链接。 
    这三部分的CSS类如下： 

    Css代码  

    1. .mydiv {    
    2.     #FCF4EA;    
    3.     border: 1px solid #D00000;  
    4.     text-align: center;    
    5.     font-size: 12px;    
    6.     z-index:99;  
    7.     left:30%;/*FF IE7*/    
    8.     top: 20%;/*FF IE7*/    
    9.     margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */    
    10.     margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/    
    11.     margin-top:0px;    
    12.     position:absolute;/*FF IE7*/    
    13. }  
    14. .note_div{  
    15.     width:700px;  
    16.     height:400px;  
    17.     overflow:scroll;  
    18.     text-align: left;  
    19.     padding:15px;  
    20. }  
    21. .bg {    
    22.     #ccc;  
    23.     filter:alpha(opacity=50);/*IE*/    
    24.     opacity:0.5;/*FF*/    
    25.     z-index:1;  
    26.     position:absolute;/*IE6*/  
    27. }  


    有个部分很重要，那就是bg遮罩层的要覆盖全屏的问题，这个东西比较难解决，所以借助了JQuery来解决，即页面初始化时再设置bg的大小： 

    Js代码  

    1. $(function(){  
    2.         $(".bg").width($(document).width());  
    3.         $('.bg').height($(document).height());  
    4.         $('.bg').css('left',0);     
    5.         $('.bg').css('top',0);  
    6.     });  



    有了上面的基础之后，只需要在单击链接时通过ajax回调来设置需要显示的数据及遮罩层，如下： 

    Js代码  

    1. function showDiv(orgId){    
    2.     regAsyncController.getOrgNotes(orgId,function(data){  
    3.         $("#orgNote").html(data);  
    4.         $("#bg").show();  
    5.         $("#popDiv").fadeIn(1000);  
    6.     });  
    7. }    
    8. function closeDiv(){  
    9.     $("#popDiv").fadeOut(1000,function(){  
    10.         $("#bg").hide();  
    11.     });  
    12. }    


    这个过程其实比较简单，但本人并不经常搞页面的东西，所以CSS的东西也记不住几个，只能知道点就写下来了。

    Déclaration：
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent：ASP如何实现注册后发送激活邮件？_html/css_WEB-ITnoseArticle suivant：如何将旋转90度的div中的每一个字再旋转回来_html/css_WEB-ITnose

    Articles Liés

    Voir plus