有时候，我们需要在页面上创建一个遮罩层，以突出某个对话框。比如，某度的登录框：
这个遮罩层，盖住了整个页面，并且随着页面的滚动，也一直稳如老狗，贴在页面上，纹丝不动。
看上去很复杂，其实很简单~！
1. 就是一个固定定位的标签，贴在整个窗口上，背景色为半透明的黑色~！
2. 还可以借机去掉窗口的滚动条，这样就连窗口滚动都不可以。
3. 有的遮罩层点击后，还可以去掉它。
这里利用一个按钮来动态生成遮罩层：
<button id="btn" type="button">点击弹出遮罩层</button>CSS
.mask{
left: 0;
top: 0;
bottom:0;
right:0;
position: fixed;
z-index: 99999;
background: rgba(0,0,0,0.6);
}
/* <html>标签要用的样式 ，跟窗口一样大，内容超出隐藏，避免出现滚动条 */
.htmlMask{
height: 100%;
width: 100%;
overflow: hidden;
}JS部分
let btn = document.getElementById("btn");
/*
* 生成 mask
* */
let createMask = ()=>{
// 如果 mask 已经存在了，就不用再创建mask了
if( document.getElementById("mask")){
return true;
}
let mask = document.createElement("div");
mask.id = "mask";
mask.className = "mask";
// 把 mask 添加到body 里。
document.body.appendChild( mask );
// 控制 <html> 标签的样式
document.documentElement.classList.add("htmlMask");
// 点击mask，就去掉mask
mask.addEventListener("click", deleteMask );
};
/*
* 删除 mask
* */
let deleteMask = ()=>{
let mask ;
// 如果 mask 存在，就删除
if( mask = document.getElementById("mask")){
// 移除 mask 上的点击事件
mask.removeEventListener("click", deleteMask );
// 删除 mask 标签
mask.parentNode.removeChild( mask );
// 去掉 <html> 标签的特定样式
document.documentElement.classList.remove("htmlMask");
}
};
btn.addEventListener("click",function(){
createMask();
});具体看注释。
这里要说明下，DOM 中：
document.body 表示body 标签
document.documentElement 表示 <html>标签。
