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

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

WBOY

Release： 2016-05-16 18:35:50

Original

1269 people have browsed it

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); }