<!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; 100%; } #bg{ display:none; background-color: #313131; 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; 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>
效果如图：
