42，css遮罩层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css外层DIV半透明内层div不透明-弹出层效果的实现【实例】</title>
    <style type="text/css">
    
        .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;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2; position:absolute; top:0px; left:0px;}
    </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>
 <span onclick="displayDiv('aaaa')" style="cursor:pointer;">点击我</span>
    <p>测试通过，兼容IE6.0、IE7.0、火狐3.6、遨游等各大浏览器</p>
</div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容