js原生实现遮罩层

html代码：

<div id="all">
<div id="fenxiang">点击出现遮罩层</div>
<div id="bg">这是遮罩层</div>
</div>

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"; //点击遮罩层，遮罩层消失
}