javascript-产生页面遮罩层

最新推荐文章于 2021-01-24 00:51:37 发布

fightingcoder419

最新推荐文章于 2021-01-24 00:51:37 发布

阅读量523

点赞数 1

文章标签： javascript 遮罩层

本文链接：https://blog.csdn.net/fightingcoder419/article/details/52268547

版权

<!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>

遮罩层可以实现在登陆、注册或删除信息时，将整个页面遮罩起来，并且弹出相应的页面，使得页面的交互效果更加明显。