<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html 最简遮罩层</title>
<style>
#popDiv{
z-index:99;
display:none;
position:absolute;
margin-top:8.86rem;
width:100%;
}
#bg{
display:none;
background-color: #313131;
width: 100%;
position:absolute;
height: 100%;
opacity: 0.5;
z-index: 1;
}
.photograph{
background: #FFFFFF;
margin: 0 0.18rem 0.18rem 0.18rem;
text-align: center;
border: 1px solid #FFFFFF;
border-radius: .3rem;
}
.album_cancel{
background: #FFFFFF;
text-align: center;
border: 1px solid #FFFFFF;
border-radius: .3rem;
display: block;
margin: 0 0.18rem;
color:#0b5ab3;
font-weight:bolder;
font-size:.36rem;
height: 1rem;
line-height:1rem;
}
.photograph p{
color: #999999;
font-size:.24rem;
font-weight: bolder;
height:0.6rem;
line-height:0.6rem;
margin:0;
}
.photograph hr{
margin: 0;
}
.photograph span{
color:#0b5ab3;
font-weight:bolder;
font-size:.36rem;
width: 100%;
display: block;
height: 1rem;
line-height:1rem;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="popDiv">
<div class="photograph">
<p>提交汇款回单照片</p>
<hr/>
<span class="photo_submit">拍照上传</span>
</div>
<span class="album_cancel">取消</span>
</div>
<div id="bg"></div>
<div style="padding-top: 10%;padding-left:40%;z-index:1;">
<input type="button" value="打开遮罩层" class="submit_proof" />
</div>
</body>
<script type="text/javascript">
//遮罩效果
$('.submit_proof').click(function(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
});
$('.album_cancel').click(function(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
});
</script>
</html>效果如图：
