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