css外层DIV半透明内层div不透明-弹出层效果的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css外层DIV半透明内层div不透明-弹出层效果的实现【实例】</title>
<style type="text/css">
body,td,th {
font-size: 12px; padding:0; margin:0;
}
.tanchuang_wrap{
width:600px;
height:400px;
position:absolute;
left: 0px;top: 0px;
z-index:100;
display:none;}
.lightbox{
width:600px;
z-index:101;
height:400px;
background-color:red;
opacity: 0.2;
***//设置透明层 注意用opacity会使盒子内的一切都透明
想仅仅使背景透明可以使用rgba（x,x,x,x），前面三位设置颜色，最后一位是透明度。***
position:absolute;
top:0px;
left:0px;}
.tanchuang_neirong{
width:353px;
height:153px;
border:solid 1px #f7dd8c;
background-color:#FFF;
position:absolute;
z-index:105; ***//数字最大，优先级最高，显示在最上面***
left: 123px;
top: 123px;//用绝对定位调整位置到.lightbox盒子中间
***//注意盒子.tanchuang_neirong不在.lightbox盒子中，不然也会被透明层覆盖***
}
</style>
<script language="javascript">
function closeDiv(divId){
document.getElementById(divId).style.display = 'none';
}
function displayDiv(divId){
document.getElementById(divId).style.display = 'block';
}
</script>
</head>
<body>
<div style="width:400px; height:400px; position:relative; text-align:center;">
<div class="tanchuang_wrap" id="aaaa">
<div class="lightbox"></div>
<div class="tanchuang_neirong">
<p><span onClick="closeDiv('aaaa')" style=" cursor:pointer;">关闭</span></p>
这里是弹窗内容
</div>
</div>
<span onclick="displayDiv('aaaa')" style="cursor:pointer;">点击我</span>
<p>测试通过，兼容IE6.0、IE7.0、火狐3.6、遨游等各大浏览器</p>
</div>
</body>
</html>
![web OS —— goowy.com[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)