html代码:
点击出现遮罩层
这是遮罩层
css代码:
all{
position: relative;
}
bg{
position: absolute;
background-color: rgba(0,0,0,0.5);
z-index: 100;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: none;
}
js代码:
var Fen = document.getElementById("fenxiang"); //获取到页面元素
var Bg = document.getElementById("bg");//添加点击事件
Fen.onclick=function(){
Bg.style.display = "block"; //点击页面出现遮罩层
}
Bg.onclick=function(){
Bg.style.display = "none"; //点击遮罩层,遮罩层消失
}