Pop-up layer effect code implemented in javascript object-oriented way_js object-oriented

Speaking of the object-oriented nature of js, we have to mention the built-in attribute of prototype, which is js (note: the prototype here is not prototype.js). Its function is to dynamically add some kind of object to an object. property. What I have to do now is to make the code as public as possible, such as inheritance and the like. Okay, I won’t say much more about this. If you don’t know about prototype, you can search for relevant content.

What I want to do today is to click on an html element to pop up a friendly dialog box. First of all, I need to make two points clear. One is that I may use this method a lot, and I don’t even want the system to appear. alert or confirm, the second point is that the pop-up content can be as diverse as possible and even customized. After clarifying these two points, we can write js code. They are all very elementary things. If you want to despise me, feel free to despise me! ^.^

First define a simple object:

Copy the code The code is as follows:

function objDIV() {
this.bgdiv;
this.infodiv;
}

First, we want to pop up a mask layer, I'll give it a name openBackDiv();

Copy code The code is as follows:

function openBackDiv(txbdiv) {
txbdiv.bgdiv = document.createElement("div");
txbdiv.bgdiv.setAttribute("id", "overDiv");
txbdiv.bgdiv.innerHTML = "";

}

Furthermore, add it to the prototype of the object just defined (openBG()):

Copy code The code is as follows:

objDIV.prototype.openBG = function() {
openBackDiv(this);
document.body.appendChild(this.bgdiv);
this.bgdiv.style.display = "block";
this.bgdiv.style. width = document.documentElement.clientWidth "px";
this.bgdiv.style.height = document.documentElement.scrollHeight "px";
}

Then add a pop-up information layer The method is the same as above. That's why I said this is a very basic thing. It seems that there is really nothing to say, so just go to the code!

This is a loading popup layer, a bit rough.

Copy code The code is as follows:

function openLoadDiv(txbdiv) {
txbdiv.infodiv = document.createElement("div");
txbdiv.infodiv.setAttribute("id", "div_info");
txbdiv .infodiv.innerHTML = "

Please wait Waiting, processing...

";
document.body.appendChild(txbdiv.infodiv);
txbdiv.infodiv .style.width = "550px";
txbdiv.infodiv.style.height = "270px";
txbdiv.infodiv.style.fontSize = "14px";
txbdiv.infodiv.style.position = "absolute";
txbdiv.infodiv.style.background = "#fff";
txbdiv.infodiv.style.zIndex = "9999";
centerobject();//Centering method
}
objDIV.prototype.openLoading = function() { this.openBG(); openLoadDiv(this); }


After doing this, a simple pop-up loading layer is completed Now. Do you feel a sense of accomplishment? Then go on to complete other tasks! Now that they're all popped up, they have to be removed at some point, and here's how to remove these layers.

Copy code The code is as follows:

objDIV.prototype.removeBG = function() {
if (this.bgdiv || document.getElementById("overDiv")) {
if (this.bgdiv) {
document.body.removeChild(this.bgdiv);
} else {
document.body.removeChild(document.getElementById("overDiv"));
}
}
}
objDIV.prototype.removeInfo = function() {
this.removeBG();
if (this.infodiv) {
document.body.removeChild(this.infodiv);
} else {
document.body.removeChild(document.getElementById("div_info"));
}
}

如果想弹出不同层信息的话，就可以添加不同的prototype属性。
完整的代码
[code]

//******js弹出层提示txb20100110********//
function objDIV() {
this.bgdiv ;
this.infodiv ;
}
objDIV.prototype.openBG = function() {
openBackDiv(this);
document.body.appendChild(this.bgdiv);
this.bgdiv.style.display = "block";
this.bgdiv.style.width = document.documentElement.clientWidth + "px";
this.bgdiv.style.height = document.documentElement.scrollHeight + "px";
}
objDIV.prototype.openRegInfo = function() {
this.openBG();
openDiv(this);
}
objDIV.prototype.openLoading = function() {
this.openBG();
openLoadDiv(this);
}
objDIV.prototype.openLoad = function() {
openLoadDiv(this);
}
objDIV.prototype.removeBG = function() {
if (this.bgdiv || document.getElementById("overDiv")) {
if (this.bgdiv) {
document.body.removeChild(this.bgdiv);
} else {
document.body.removeChild(document.getElementById("overDiv"));
}
}
}
objDIV.prototype.removeInfo = function() {
this.removeBG();
if (this.infodiv) {
document.body.removeChild(this.infodiv);
} else {
document.body.removeChild(document.getElementById("div_info"));
}
}

function openLoadDiv(txbdiv) {
txbdiv.infodiv = document.createElement("div");
txbdiv.infodiv.setAttribute("id", "div_info");
txbdiv.infodiv.innerHTML = "

请稍等，正在处理中...

";
document.body.appendChild(txbdiv.infodiv);
txbdiv.infodiv.style.width = "550px";
txbdiv.infodiv.style.height = "270px";
txbdiv.infodiv.style.fontSize = "14px";
txbdiv.infodiv.style.position = "absolute";
txbdiv.infodiv.style.background = "#fff";
txbdiv.infodiv.style.zIndex = "9999";

centerobject();
}

function openBackDiv(txbdiv) {
txbdiv.bgdiv = document.createElement("div");
txbdiv.bgdiv.setAttribute("id", "overDiv");
//alert(document.documentElement.clientWidth);
txbdiv.bgdiv.innerHTML = "";
//"

";
//txbdiv.openBG();
}
function openDiv(txbdiv) {
//txbdiv.openBG();
txbdiv.infodiv = document.createElement("div");
txbdiv.infodiv.setAttribute("id", "div_info");
txbdiv.infodiv.innerHTML = "

恭喜您，注册成功!

请牢记您的账号：5678537

";
document.body.appendChild(txbdiv.infodiv);
txbdiv.infodiv.style.width = "550px";
txbdiv.infodiv.style.height = "270px";
txbdiv.infodiv.style.fontSize = "14px";
txbdiv.infodiv.style.position = "absolute";
txbdiv.infodiv.style.background = "#fff";
txbdiv.infodiv.style.zIndex = "9999";

centerobject();
}

function centerobject() {
if (document.getElementById("overDiv")) {
var objdiv = document.getElementById("overDiv").style;
objdiv.height = document.documentElement.scrollHeight "px";
objdiv.left = parseInt((document.documentElement.clientWidth - parseInt(objdiv.width)) / 2) "px";
//alert(document.documentElement.scrollHeight)
objdiv.top = parseInt((document.documentElement.clientHeight - parseInt(objdiv.height)) / 2) "px";
}
if (document.getElementById("div_info")) {
var div_info = document.getElementById("div_info").style;
div_info.left = parseInt((document.documentElement.clientWidth - parseInt(div_info.width)) / 2) "px";
div_info.top = parseInt((document.documentElement.clientHeight - parseInt(div_info.height)) / 2) "px";
}
}

function centerDIV(objId) {
if (document.getElementById(objId)) {
var objdiv = document.getElementById(objId).style;
objdiv.height = document.getElementById(objId).scrollHeight "px";
objdiv.width = document.getElementById(objId).scrollWidth "px";
objdiv.left = parseInt((document.documentElement.clientWidth - parseInt(objdiv.width)) / 2) "px";
//alert(document.documentElement.scrollHeight)
objdiv.top = parseInt((document.documentElement.clientHeight - parseInt(objdiv.height))/ 2) "px";

}
}

function centerObj(obj) {
if (obj) {
var objdiv = obj.style;
objdiv.height = obj.scrollHeight "px";
objdiv.width = obj.scrollWidth "px";
objdiv.left = parseInt((document.documentElement.clientWidth - parseInt(objdiv.width)) / 2) "px";
//alert(document.documentElement.scrollHeight)
objdiv.top = parseInt((document.documentElement.clientHeight - parseInt(objdiv.height)) / 2) "px";
}
}
//window.onresize = centerobject;
[code]
演示地址 http://demo.jb51.net/js/opendiv/opendiv.htm