CSS遮罩层的实现

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

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

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

1. .mydiv{
2. #FCF4EA;
3. border:1pxsolid#D00000;
4. text-align:center;
5. font-size:12px;
6. z-index:99;
7. left:30%;/*FFIE7*/
8. top:20%;/*FFIE7*/
9. margin-left:-150px!important;/*FFIE7该值为本身宽的一半*/
10. margin-top:-60px!important;/*FFIE7该值为本身高的一半*/
11. margin-top:0px;
12. position:absolute;/*FFIE7*/
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的大小：

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

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

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

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