简单模拟模态框

效果如下：
CSS部分

body, html {
	width: 100%;
	padding: 0px;
	margin: 0px;
}
.mask {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	display: none;
	background-color: #666;
}
.login {
	margin: 200px auto;
	width: 400px;
	height: 300px;
	background-color: #fff;
	cursor: pointer;
}

body部分

<div class="mask" id="mask">
	<div class="login" id="login">
	</div>
</div>
<a href="#">注册</a>
<a href="#">登录</a>
<script>
//需求：当点击登录时，显示mask，当再点击除mask以外的部分的话关闭mask
var mask = document.getElementById("mask");
var login = document.getElementById("login");
var aArr = document.getElementsByTagName("a");
aArr[1].onclick = function (event){
	mask.style.display = "block";
	console.log(mask.style.display);
	//阻止事件冒泡
	event = event || window.event;
	if(event || event.stopPropagation){
		event.stopPropagation();
	}else{
		event.cancelBubble = true;
	}
}
document.onclick = function (event){
	event = event || window.event;
	//兼容获取事件触动时，传递过来的对象
	var deal = event.target?event.target:event.srcElement;
	if(deal.id !== "login"){
		mask.style.display = "none";
	}
}
</script>