js中页面添加遮罩（蒙层）的方法

使用场景

在当前页面需要弹出另一个页面时，为了使用户可以更好地聚焦到当前弹出的页面上，往往需要将原先的页面添加一个遮罩，换句话说就是使原先窗口和当前窗口保持一暗一明，区分明显。

实现思路

1. 在原先窗口通过document.creatElement()创建一个新元素（蒙层），使其显示在原先整个页面的上方并设置其透明度；
2. 使用同样的方法继续创建一个新元素（新页面），使其显示在蒙层的上方；
3. 通过appendChild()方法将上面创建的两个元素节点添加到指定页面中；
4. 弹窗关闭后，通过removeChild()方法将创建的元素进行移除，页面显示原先页面。

结果展示

具体步骤

1. 创建蒙层

   function myFunction(){
   	var backMask = document.createElement("div");
        backMask .id = "backMask";
   	backMask.style.backgroundColor = "black";
   	backMask.style.position = "absolute";
   	backMask.style.top = "0";
   	backMask.style.left = "0";
   	backMask.style.width = "100%";
   	backMask.style.height = "100%";
   	backMask.style.zIndex = "1001";
   	backMask.style.opacity = "0.6";
   

2. 创建显示窗口

        var showDiv = document.createElement("div");
   	showDiv.id = "showDiv";
   	showDiv.style.backgroundColor = "white";
   	showDiv.style.position = "absolute";
   	showDiv.style.top = "40%";
   	showDiv.style.left = "40%";
   	showDiv.style.width = "20%";
   	showDiv.style.height = "20%";
   	showDiv.style.zIndex = "1002";
   	showDiv.style.textAlign = "center";
   	
   	var title = document.createElement("span");
   	title.style.color = "black";
   	title.style.lineHeight = "190px";
   	title.style.fontSize = "19px";
   	title.style.padding = "10px 15px";
   	title.style.backgroundColor = "white";
   	title.style.fontFamily = "-webkit-body";
   	title.innerText = "操作进行中，请稍后......";
   

3. 添加到指定元素节点

   document.body.appendChild(backMask);
   document.body.appendChild(showDiv);
   document.getElementById("showDiv").appendChild(title);
   

4. 关闭窗口

   document.body.removeChild(ner);
   document.body.removeChild(ner1);