页面弹层置灰 js

来源：互联网发布：数据质量评估编辑：程序博客网时间：2024/05/16 08:25

在页面上整体加上 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

预览效果如下：

0 0