首先我们定义好html结构,mask为遮罩层的结构
<body>
<a href="#">登陆</a>
<div class="mask" id="mask">
<div class="login" id="login">
</div>
</div>
</body>
使用css样式,首先使mask遮罩层隐藏
.mask{
width: 100%;
height: 100%;
position: fixed;
top:0;
left: 0;
display: none;
background-color: rgba(0, 0, 0, 0.6);
}
.mask .login{
width: 500px;
height: 350px;
background-color: #fff;
margin:150px auto;
}
接下来我们给连接添加点击事件,点击后让遮罩层出现,同时阻止冒泡事件,当点击login以外的地方,我们让遮罩层消失
var a = document.getElementsByTagName("a")[0];
var mask = document.getElementById("mask");
a.onclick = function(event){
mask.style.display = "block";
//阻止冒泡
event = event || window.event;
if (event || event.stopPropagation()){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
document.onclick = function(event){
event = event || window.event;
//兼容获取触动事件时被传递过来的对象
var aaa =event.target?event.target:event.srcElement;
if (aaa.id !== "login"){
mask.style.display = "none";
}
}
当点击链接时:
点击login以外的地方,遮罩层消失,当然,我们也可以给其使用其他的形式让遮罩层消失。