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

最新推荐文章于 2020-06-24 10:14:51 发布

ai_d_chuan

最新推荐文章于 2020-06-24 10:14:51 发布

阅读量2.6k

点赞数

分类专栏： web前端文章标签： web css

本文链接：https://blog.csdn.net/ai_d_chuan/article/details/82845768

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

ai_d_chuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css外层DIV半透明内层div不透明-弹出层效果的实现

css外层DIV半透明内层div不透明-弹出层效果的实现&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;css外层DIV半透明内层div不透明-弹出层效果的实现【
复制链接

扫一扫

专栏目录