网页特效之遮罩弹出

在各种网站中，经常遇到点击注册/登录,然后使用遮罩并弹出注册/登录的界面。

思路：
使用id为mask的盒子作为遮罩盒子，该盒子继承body的宽高，使用半透明黑色背景。
使用id为box的盒子作为弹出界面，该盒子还包含一个关闭按钮。
当我们点击一下注册按钮时，网页被mask盒子遮盖，并且在页面正中间出现界面box盒子

关键点：
display: none;和display:block的转换
层级z-index的覆盖
box盒子水平垂直居中

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>遮罩弹出层</title>
	<style>
		*{/*清除浏览器默认的margin,padding*/
			margin:0;
			padding: 0;
		}
		body {
			height: 2000px;/*为了使有滚动条*/
		}
		.w {/*版心*/
			width:960px;
			margin:0 auto;
			clear:both;
		}
		.top_left {
			float: left;
		}
		.top_right {
			float: right;
		}
		.top_right a {
			text-decoration: none;
		    color: orange;
		    margin-left: 30px;
		}
		#mask {
			width:100%;/*继承父元素宽度*/
			height: 100%;/*继承父元素高度*/
			background:rgba(0,0,0,0.2);/*黑色半透明*/
			position: fixed;/*固定定位，使即使有滚动条也一直覆盖全屏**/
			z-index: 999;/*999的层级，覆盖在页面所有元素上方*/
			display: none;
		}
		#box {
			width:400px;
			height: 200px;
			background: #fff;
			z-index: 1000;/*1000的层级，覆盖在遮罩上方*/
			position: fixed;/*固定在页面中央*/
			left: 50%;
			top:50%;
			margin:-100px 0 0 -200px;
			display: none;
		}
		#close {
			width:15px;
			height: 15px;
			background: rgba(0,0,0,.3);
			text-align: center;
			line-height: 15px;
			cursor:pointer;
			float: right;
		}
	</style>
</head>
<body>
	<header class="w">
		<div class="top_left">欢迎来到XXXXXXXXXXXXX</div>
		<div class="top_right">
			<a href="javascript:;" id="login">注册</a>
			<a href="javascript:;">登录</a>
		</div>
	</header>
	<div id="mask"><!-- 遮罩盒子 --></div>
	<div id="box">
		<span id="close">x</span>
	</div>
	<div class="main w">
		
	</div>
</body>
<script type="text/javascript">
	var mask = document.getElementById('mask');
	var login = document.getElementById('login');
	var close = document.getElementById('close');
	var box = document.getElementById('box');
	login.onclick = function(){
		mask.style.display = 'block';
		box.style.display = 'block';
	}
	close.onclick = function(){
		mask.style.display = 'none';
		box.style.display = 'none';
	}
</script>
</html>

具体效果可见：遮罩弹出（记得点击注册按钮）

网页特效之遮罩弹出

猜你喜欢