欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS遮罩层的实现

程序员文章站 2022-07-15 11:23:48
...
偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。
直接上代码吧。
第一步,html代码:
<div id="popDiv" class="mydiv" style="display:none;">
   <div style="text-align:right">
    <a href="javascript:closeDiv()">
       <img src="/ams/images/yygh_a/close.gif"/>
     </a>
    </div>
    <div id='orgNote' class="note_div"></div>
</div>
								
<div id="bg" class="bg" style="display:none;"></div>
<div style="margin-left: 180px;">
<a title="即时了解挂号、退号信息" style="margin-left:0px;background-color: #FFFF66;font-size: 16px;text-decoration: underline !important;" href='javascript:showDiv(${doctor.orgId})'>《挂号须知》</a>
</div>

上面的代码由三部分构成,popDiv表示弹出层,即单击“挂号须知”链接时弹出。
而bg表示遮罩层,即弹出层显示时将层后面的内容遮住。最后就是指显示的链接。
这三部分的CSS类如下:
.mydiv {  
	background-color: #FCF4EA;  
	border: 1px solid #D00000;
	text-align: center;  
	font-size: 12px;  
	z-index:99;
	left:30%;/*FF IE7*/  
	top: 20%;/*FF IE7*/  
	margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */  
	margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/  
	margin-top:0px;  
	position:absolute;/*FF IE7*/  
}
.note_div{
	width:700px;
	height:400px;
	overflow:scroll;
	text-align: left;
	padding:15px;
}
.bg {  
	background-color: #ccc;
	filter:alpha(opacity=50);/*IE*/  
	opacity:0.5;/*FF*/  
	z-index:1;
	position:absolute;/*IE6*/
}

有个部分很重要,那就是bg遮罩层的要覆盖全屏的问题,这个东西比较难解决,所以借助了JQuery来解决,即页面初始化时再设置bg的大小:
$(function(){
		$(".bg").width($(document).width());
		$('.bg').height($(document).height());
		$('.bg').css('left',0);   
   	 	$('.bg').css('top',0);
	});


有了上面的基础之后,只需要在单击链接时通过ajax回调来设置需要显示的数据及遮罩层,如下:
function showDiv(orgId){  
	regAsyncController.getOrgNotes(orgId,function(data){
		$("#orgNote").html(data);
		$("#bg").show();
		$("#popDiv").fadeIn(1000);
	});
}  
function closeDiv(){
	$("#popDiv").fadeOut(1000,function(){
		$("#bg").hide();
	});
}  

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