遮罩层
遮罩层示例
这里是内容页面!
下面是本例的代码：
<!DOCTYPE html> <html> <head> <title>遮罩层示例</title> <meta charset="utf-8" /> <style type="text/css"> .dialog-back{ display: none; position: absolute; top:0%; left:0%; width:100%; height:100%; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70); background-color:black; z-index: 1000; } .dialog-pop{ display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: black; z-index:1001; overflow: auto; } </style> </head> <body> <div class="main"> <p>这里是内容页面!</p> <input type="button" value="弹出遮罩层" onclick="document.getElementById('back').style.display='block';document.getElementById('test').style.display='block';" /> <input type="button" value="遮罩下点击" onclick="alert('如果你看到我，说明你的遮罩层有问题哦!')" /> </div> <!--遮罩层--> <div class="dialog-back" id="back"></div> <!--位于遮罩层上的弹窗层--> <div class="dialog-pop" id="test"> <input type="button" value="查看遮罩层" onclick="alert('这里是弹窗层');"/> <input type="button" value="隐藏遮罩层" onclick="document.getElementById('back').style.display='none';document.getElementById('test').style.display='none';" /> <p>这里是弹窗层!</p> </div> </body> </html>
这里是弹窗层!
