半透明弹出层

最新推荐文章于 2022-01-05 20:39:24 发布

小熊猫爱Code

最新推荐文章于 2022-01-05 20:39:24 发布

阅读量423

点赞数

分类专栏：开发随时查

本文链接：https://blog.csdn.net/xxmeng2012/article/details/45893805

版权

开发随时查专栏收录该内容

26 篇文章 0 订阅

订阅专栏

每次使用都要现查，还是记录下吧，供大家参考。

透明层的css，如果使用opacity，则子div也会半透明，此处background-color使用rgba(6, 6, 6, .5)替代#666，即可做到子div不透明。

    .div-pop {
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(6,6,6,.5);
        height: 100%;
        width: 100%;
        display: none;
        z-index: 1000;
        /*opacity: 0.4;*/
    }

    <div class="div-pop">
        <div style="background-color: #FFF; width: 400px; margin-top: 20%; margin-left: 35%; position: absolute; ">
            内容在此
        </div>
    </div>

发现此方法还是有兼容性问题，一个非主流的Avant浏览器下，遮罩层并没有显示出来，下面的例子亲测有效。

<html>
	<head>
	<script>
		function reSizeWindow()
		{
			var shadow = document.getElementById("shadow");
			var dialog = document.getElementById("dialog");
			
			shadow.style.width = parseInt(document.body.clientWidth) + parseInt(document.body.scrollLeft);
			shadow.style.height = parseInt(document.body.clientHeight) + parseInt(document.body.scrollTop);
				
			dialog.style.left = parseInt(document.body.clientWidth)/2 - parseInt(dialog.style.width)/2 + parseInt(document.body.scrollLeft);
			dialog.style.top = parseInt(document.body.clientHeight)/2 - parseInt(dialog.style.height)/2 + parseInt(document.body.scrollTop);
		}
		function openWindow()
		{
			document.getElementById("shadow").style.display = "block";
			document.getElementById("dialog").style.display = "block";
			
			reSizeWindow();
		}
		function closeWindow()
		{
			document.getElementById("shadow").style.display = "none";
			document.getElementById("dialog").style.display = "none";
		}
	</script>
	<style type="text/css">
		.dialogStyle
		{
			background:red;
			position:absolute;
			display:none;
			text-align:right;
			z-index:2;
		}
		.shadowStyle
		{
			position:absolute;
			left:0px;
			top:0px;
			display:none;
			filter:alpha(opacity=30);
			opacity:0.3;
			background:gray;
			z-index:1;
		}
	</style>
	</head>
	<body style="margin:0px 0px 0px 0px;">
		<input type="button" οnclick="openWindow()" value="open" style="margin-left:100px;margin-top:100px;"/>
		<div id="dialog" class="dialogStyle" style="width:200px;height:200px;">
			<input type="button" value="close" οnclick="closeWindow()"/>
		</div>
		<div id="shadow" class="shadowStyle">
		</div>
		<!--width:200px;height:200px;background:red;position:absolute;display:none;text-align:right;z-index:2;-->
		<!--position:absolute;left:0px;top:0px;display:none;filter:alpha(opacity=30);opacity:0.3;background:gray;z-index:1;-->
		
		<script>
			window.onresize = function()
			{
				reSizeWindow();
			}
			window.onscroll = function()
			{
				reSizeWindow();
			}
			for(var i = 0;i < 100;i++)
			{
				document.write("<br/>"+i);
			}
		</script>
	</body>
</html>

小熊猫爱Code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
半透明弹出层

每次使用都要现查，还是记录下吧，供大家参考。透明层的css，如果使用opacity，则子div也会半透明，此处background-color使用rgba(6, 6, 6, .5)替代#666，即可做到子div不透明。 .div-pop { position: fixed; left: 0; top: 0; backgr
复制链接

扫一扫