码迷,mamicode.com
首页 > 其他好文 > 详细

实现弹出层,遮罩层

时间:2017-07-26 18:40:27      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:enter   abs   cli   block   一个   实现   top   point   遮罩   

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


<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>

实现弹出层,遮罩层

标签:enter   abs   cli   block   一个   实现   top   point   遮罩   

原文地址:http://www.cnblogs.com/oldZhangFeng/p/7241261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!