点击时显示遮罩层，登录时灰色遮罩效果 

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			#mask {
				background: #000000;
				opacity: 0.75s
				height: 800px;
				width: 100%;
				position: absolute;
				z-index: 999;
				left: 0;
				top: 0;
			}
			
			#login {
				position: fixed;
				z-index: 1000;
			}
			
			.loginCon {
				width: 570px;
				height: 280px;
				background-color: coral;
			}
			
			#close {
				width: 50px;
				height: 50px;
				background-color: #8A2BE2;
				position: absolute;
				right: 10px;
				top: 10px;
				cursor: pointer;
			}
			
			#btn {
				width: 100px;
				height: 30px;
				line-height: 30px;
				background-color: #00FFFF;
				text-align: center;
				cursor: pointer;
			}
		</style>

	</head>

	<body>
		<div id="btn" onclick="openNew()">登 陆</div>	
</body>

</html>
<script type="text/javascript">
	function openNew() {
		var oBtn = document.getElementById("btnLogin");
		//				获取页面高度和宽度
		var sHeight = document.documentElement.scrollHeight;
		var sWidth = document.documentElement.scrollWidth;
		//				alert(sHeight);
		//				alert(sWidth);
		//				可视区域的高度和宽度
		var wHeight = document.documentElement.clientHeight;
		var wWidth = document.documentElement.clientWidth;
		//				alert(sHeight);
		//				alert(sWidth);
		var oMask = document.createElement("div");
		oMask.id = "mask";
		oMask.style.height = sHeight + "px";
		oMask.style.width = sWidth + "px";
		document.body.appendChild(oMask);

		var oLogin = document.createElement("div");
		oLogin.id = "login";
		oLogin.innerHTML = '<div class="loginCon"><div id="close"></div></div>';
		document.body.appendChild(oLogin);
		var dHeight = oLogin.offsetHeight;
		var dWidth = oLogin.offsetWidth;

		oLogin.style.top = (wHeight - dHeight) / 2 + "px";
		oLogin.style.left = (wWidth - dWidth) / 2 + "px";
		var oClose = document.getElementById("close")
		oClose.onclick = function() {
			document.body.removeChild(oMask);
			document.body.removeChild(oLogin);
		}
		oMask.onclick = function() {
			document.body.removeChild(oMask);
			document.body.removeChild(oLogin);
		}
	}
</script>

　　

效果图如下：

点击之后：

 

posted @ 2016-12-09 15:57  赵天成123  阅读(417)  评论(0)  编辑  收藏  举报