实现弹出层,遮罩层

开发中经常会用到弹出遮罩层的时候,下面是一个简单的遮罩层弹窗

 

<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>
posted @ 2017-07-26 18:26  可以叫我老张  阅读(1018)  评论(0编辑  收藏  举报