实现网页弹窗背景暗化效果-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_4348/article/details/82643910

网页要做出弹出框后面的背景变暗效果，代码如下：

function show() //显示隐藏层和弹出层
	{
		var hideobj = document.getElementById("hidebg");
		hideobj.style.display = "block"; //显示隐藏层
		hideobj.style.height = document.body.clientHeight + "px"; //设置隐藏层的高度为当前页面高度
		document.getElementById("hidebox").style.display = "block"; //显示弹出层
	}

然后是隐藏层的代码及其格式：

<style>
#hidebg {
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #000;
	width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
	filter: alpha(opacity = 60); /*设置透明度为60%*/
	opacity: 0.6; /*非IE浏览器下设置透明度为60%*/
	display: none; 
	z-Index: 2;
}
</style>
<body>
	<div id="hidebg"></div>

最后还有弹出层：

<div id="hidebox">
			<iframe src="${pageContext.request.contextPath }/manager/shopcar/shopcar.jsp" scrolling="yes" name="shopca" border="0" id="shopca" frameborder="0"
			width="800px" height="300px"></iframe>
		
</div>

弹出框后背景变暗