开发中经常会用到弹出遮罩层的时候,下面是一个简单的遮罩层弹窗
<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>