欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

弹出框后背景变暗

程序员文章站 2022-03-26 18:24:46
...

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

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>

 

相关标签： 背景变暗

上一篇： 三个白帽挑战赛第三期的简单思路(第一次接触php反序列化)

下一篇： php array_reverse 以相反的顺序返回数组详解

推荐阅读