CSS遮罩层的实现

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

Java代码  

1. <div id="popDiv" class="mydiv" style="display:none;">  
2.    <div style="text-align:right">  
3.     <a href="javascript:closeDiv()">  
4.        <img src="/ams/images/yygh_a/close.gif"/>  
5.      </a>  
6.     </div>  
7.     <div id='orgNote' class="note_div"></div>  
8. </div>  
9.                                   
10. <div id="bg" class="bg" style="display:none;"></div>  
11. <div style="margin-left: 180px;">  
12. <a title="即时了解挂号、退号信息" style="margin-left:0px;background-color: #FFFF66;font-size: 16px;text-decoration: underline !important;" href='javascript:showDiv(${doctor.orgId})'>《挂号须知》</a>  
13. </div>  

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

Css代码  

1. .mydiv {    
2.     background-color: #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.     background-color: #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. }