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

Speaking of js object-oriented, we have to mention the built-in attribute of prototype (note: the prototype here is not), its function is to dynamically add some attribute to an object. What I have to do now is to make the code public as much as possible, such as inheritance. Okay, I won’t say much 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 make it pop up a friendly dialog box. First of all, two points need to be clear. One is that I may use this method in a large number, and I don’t even want the system alert or confirm. The second point is that the popup content can be as diverse as possible, or even customized. After clarifying these two points, we can write js code. They are all very basic things. If you want to despise me, please despise me as much as you want! ^.^

First define a simple object:

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

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

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

This is a loading pop-up layer, a bit rough.

After doing these, a simple pop-up loading layer is completed. Isn’t it a little fulfilling? Then continue to complete the other work! Since they all pop up, you have to remove them at some point. Here is how to remove these layers.

If you want to pop up different layers of information, you can add different prototype attributes.
Complete code
[code]

//******js pop-up layer prompt txb20100110******//
function objDIV() {
;
;
}
= function() {
openBackDiv(this);
();
= "block";
= + "px";
= + "px";
}
= function() {
();
openDiv(this);
}
= function() {
();
openLoadDiv(this);
}
= function() {
openLoadDiv(this);
}
= function() {
if ( || ("overDiv")) {
if () {
();
} else {
(("overDiv"));
}
}
}
= function() {
();
if () {
();
} else {
(("div_info"));
}
}

function openLoadDiv(txbdiv) {
= ("div");
("id", "div_info");
= "<div style=\" line-height:1.5;background:url() repeat-x; height:54px; text-align:center;\"><img border=\"0\" src=\"\" /></div><div style='padding:20px; font-size:14px; color:#b44201;'><div style='width:100px; float:left;margin:60px 0 0 60px; height:80px;'><img src='' width='100px' height='100' border='0' /></div><div style='float:left; width:250px;margin:90px 0 0 20px;'><p>Please wait, processing is under...</p></div></div></div>";
();
= "550px";
= "270px";
= "14px";
= "absolute";
= "#fff";
= "9999";

centerobject();
}

function openBackDiv(txbdiv) {
= ("div");
("id", "overDiv");
//alert();
= "<iframe frameborder=\"no\" class=\"overPanel\" id=\"ifrover\"></iframe>";
//"<div id=\"overPanel\" > <iframe frameborder=\"no\" class=\"overPanel\" id=\"ifrover\"></iframe></div>";
//();
}
function openDiv(txbdiv) {
//();
= ("div");
("id", "div_info");
= "<div style=\" line-height:1.5;background:url() repeat-x; height:54px; text-align:center;\"><img border=\"0\" src=\"\" /></div><div style=\"padding:20px;\"><div style=\"width:120px; float:left;\"><img src=\"\" /></div><div style=\"float:right; width:350px;color:#b44201;\" id=\"showdivinfo\"><p>Congratulations, registration is successful!</p><p>Please keep your account in mind: <font color=\"#b44201\" id=\"orpai_ID\">5678537</font></p></div><div style=\"margin:0 auto;\"><input type='button' value='confirm' onclick='new objDIV().removeInfo();'/></div></div>";
();
= "550px";
= "270px";
= "14px";
= "absolute";
= "#fff";
= "9999";

centerobject();
}

function centerobject() {
if (("overDiv")) {
var objdiv = ("overDiv").style;
= + "px";
= parseInt(( - parseInt()) / 2) + "px";
//alert()
= parseInt(( - parseInt()) / 2) + "px";
}
if (("div_info")) {
var div_info = ("div_info").style;
div_info.left = parseInt(( - parseInt(div_info.width)) / 2) + "px";
div_info.top = parseInt(( - parseInt(div_info.height)) / 2) + "px";
}
}

function centerDIV(objId) {
if ((objId)) {
var objdiv = (objId).style;
= (objId).scrollHeight + "px";
= (objId).scrollWidth + "px";
= parseInt(( - parseInt()) / 2) + "px";
//alert()
= parseInt(( - parseInt())/ 2) + "px";

}
}

function centerObj(obj) {
if (obj) {
var objdiv = ;
= + "px";
= + "px";
= parseInt(( - parseInt()) / 2) + "px";
//alert()
= parseInt(( - parseInt()) / 2) + "px";
}
}
// = centerobject;
[code]
Demo addresshttp://demo./js/opendiv/