一、html文件
<div id="bg"></div>
<div id="d1">
遮罩层上显示的div
<input type="button" id="cancel" value="取消">
</div>
<input type="button" id="show" value="显示遮罩层">
二、css文件
#bg {
background-color: rgb(51,51,51);
position: absolute;
z-index: 95;
left: 0;
top: 0;
display: none;
width: 100%;
height:100%;
opacity: 0.5;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
}
#d1{
width: 652px;
height: 429px;
border: 1px solid rgb(238,238,238);
display: none
margin-left: 200px;
margin-top: 20px;
z-index: 100;
position: absolute;
padding: 1px;
background-color: white;
}
三、js文件
$(function(){
/*点击显示遮罩层以后，遮罩层和遮罩层上的div同时显示*/
$('#show').click(function(){
$("#bg").css({
display: "block"
});
$('#d1').css({
left:200+"px",
top:400+"px",
display:"block",
});
});
/*点击取消之后，遮罩层和遮罩层上的div都隐藏*/
$('#cancel').click(function(){
$('#bg,#d1').css("display","none");
});
})