首页 > 代码库 > 遮罩层
遮罩层
遮罩层示例
<style></style>这里是内容页面!
下面是本例的代码：
<!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>
这里是弹窗层!
遮罩层
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。