javascript-产生页面遮罩层

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.shadow{
				top:0px;
				left:0px;
				right:0px;
				bottom:0px;
				position:absolute;
				background-color: rgba(100,100,100,0.4);
			}
		</style>
	</head>
	<body>
		<input type="button" value="产生遮罩层" οnclick="shadow()"/>
	</body>
	<script>
		//产生遮罩层
		function shadow(){
			var div=document.createElement("div");
			div.style.width=document.body.clientWidth+30+"px";
			div.style.height=document.body.scrollHeight+15+"px";
			div.className="shadow";
			document.body.appendChild(div);
		}
	</script>
</html>
遮罩层可以实现在登陆、注册或删除信息时,将整个页面遮罩起来,并且弹出相应的页面,使得页面的交互效果更加明显。

版权声明:本文为fightingcoder419原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。