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>
