页面弹层置灰 js

在页面上整体加上 meng 层，置灰并显示加载。

大家分享下，有好的意见或者资源多多推荐

/***  定义属性
  className:元素选择器的class 值
  id:元素的 id 值，必填；
  content：弹层需要添加的内同，可选
  tagName:需要穿创建的元素，必填
  appendElment:追加 弹层 的元素
  msgDiv：需要在弹层上居中的信息 id值
***/
       function CreateDIV(className,id,content,tagName,appendElment,msgDiv)  
{  
 this.className =className;  
 this.id = id;  
 this.content = content; 
 this.tagName = tagName;
 this.appendElment = appendElment;
 this.msgDiv = msgDiv;
}  
/** 定义公用的方法**/
CreateDIV.prototype = {
  "createDivTag":function(){
  var htmlDiv;
  if(this.appendElment == 'body'){
htmlDiv = document.body;
  }else{
  htmlDiv = document.body.querySelector(this.appendElment);
   htmlDiv.style.position="absolute"; //增加定位
  
  }
 
  var divElement = document.createElement(this.tagName);
  divElement.className = this.className;
  divElement.id = this.id;
  divElement.innerHTML = this.content;
  //增加 弹层整页 置灰 样式
divElement.style.position="fixed";
divElement.style.zIndex="10";
divElement.style.width="100%";
   divElement.style.height="100%";
divElement.style.background="rgba(0, 0, 0, 0.4)";
   divElement.style.top="0px";
divElement.style.left="0px";
//追加样式
  htmlDiv.appendChild(divElement);
  
  //设置弹层内容的维位置居中
  this.showLoadMsg();
  return;
  },
  "hideMsg":function(){
     /** 定义自己的方法   **/
  },
  "showLoadMsg":function(){
        var width = window.document.getElementById(this.id).offsetWidth/2;
    var height = window.document.getElementById(this.id).offsetHeight/2;
    document.getElementById(this.msgDiv).style.marginTop = (height-34)+'px';
    document.getElementById(this.msgDiv).style.marginLeft = (width-16)+'px';
  }
}

调用方式：new CreateDIV('popDIV','popDIV','<img src="images/wait.gif" id="loadImg">','div','body','loadImg').createDivTag();   //追加元素 body

预览效果如下：