css外层DIV半透明内层div不透明-弹出层效果的实现

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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值