`

弹出框后背景变暗

    博客分类：
  • JS
背景变暗 
阅读更多

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

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>

 

分享到：
| DIV弹出框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics