实现弹出层，遮罩层
Posted 可以叫我老张
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现弹出层，遮罩层相关的知识，希望对你有一定的参考价值。
开发中经常会用到弹出遮罩层的时候，下面是一个简单的遮罩层弹窗
<style type="text/css">
<!--
body,td,th {
font-size: 12px; padding:0; margin:0;
}
.tanchuang{ width:100px; height:100px;position:absolute;left: 0px;top: 0px;z-index:100; display:none;}
.box{width:600px;z-index:101; height:400px;background-color:red;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2; position:absolute; top:0px; left:0px;}
.tanchuang_content{width:353px;height:153px;border:solid 1px #f7dd8c;background-color:#FFF;position:absolute;z-index:105;left: 123px;top: 123px;}
-->
</style>
<script language="javascript">
function close(divId){
document.getElementById(divId).style.display = ‘none‘;
}
function show(divId){
document.getElementById(divId).style.display = ‘block‘;
}
</script>
<body>
<div style="width:400px; height:400px; position:relative; text-align:center;">
<div class="tanchuang" id="a">
<div class="box"></div>
<div class="tanchuang_content">
<p><span onClick="close(‘a‘)" style=" cursor:pointer;">X</span></p>
弹窗内容</div>
</div>
<span onclick="show(‘a‘)" style="cursor:pointer;">点击出现弹窗</span>
</div>
以上是关于实现弹出层，遮罩层的主要内容，如果未能解决你的问题，请参考以下文章
jquery遮罩层遮挡不住图片是怎么回事，弹出层，网页背景透明那块，文字什么的都可以遮住