有時候，我們需要在頁面上創建一個遮罩層，以突出某個對話框。比如，某度的登錄框：
這個遮罩層，蓋住了整個頁面，並且隨着頁面的滾動，也一直穩如老狗，貼在頁面上，紋絲不動。
看上去很複雜，其實很簡單~！
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>標籤。