Create a pop-up layer using javascript object-oriented method

Because I used to be. net programmers, so even if you are working on the front-end, you are also used to writing js scripts in an object-oriented way. I think if you were or are still a third-generation programmer, you should be familiar with this.

Speaking of js object-oriented, we have to mention prototype, the js built-in attribute (Note: prototype is not prototype here. js), which can dynamically add certain attributes to an object. What I want to do now is to make the code as public as possible, such as inheritance. Well, I will not say much about this. If you are not familiar with prototype, you can search for related content.

What we need to do today is to click an html element to bring up a friendly dialog box. First, we need to clarify two points. One point is that I may use this method in large quantities, you do not even want the system's alert or confirm to appear. The second point is that the pop-up content can be customized as much as possible. After clarifying these two points, we can write JavaScript code. They are basic things. If you want to despise me, Please despise me! ^. ^

First, define a simple object:
Function objDIV (){
This. bgdiv;
This. infodiv;
}
First, we want to bring up a mask layer. I will name it openBackDiv ();

Function openBackDiv (txbdiv ){
Txbdiv. bgdiv = document. createElement ("div ");
Txbdiv. bgdiv. setAttribute ("id", "overDiv ");
Txbdiv. bgdiv. innerHTML = "<iframe frameborder = \" no \ "class = \" overPanel \ "id = \" ifrover \ "> </iframe> ";

}
In addition, add it to the prototype of the defined object (openBG ()):

ObjDIV. prototype. openBG = function (){
OpenBackDiv (this );
Document. body. appendChild (this. bgdiv );
This. bgdiv. style. display = "block ";
This. bgdiv. style. width = document.doc umentElement. clientWidth + "px ";
This. bgdiv. style. height = document.doc umentElement. scrollHeight + "px ";
}


The method for adding the pop-up information layer is the same as above. That's why I said this is a very basic thing. It seems that there is nothing to say about it. Just go to the code!

This is a loading pop-up layer, a bit rough. function openLoadDiv (txbdiv ){
Txbdiv. infodiv = document. createElement ("div ");
Txbdiv. infodiv. setAttribute ("id", "div_info ");
Txbdiv. infodiv. innerHTML = "<div style = \" line-height: 1.5; background: url (.. /images/tips-top-bg.gif) repeat-x; height: 54px; text-align: center; \ "> </div> <div style = 'padding: 20px; font-size: 14px; color: # b44201; '> <div style = 'width: 100px; float: left; margin: 60px 0 0 60px; height: 80px; '> </div> <div style =' float: left; width: 250px; margin: 90px 0 0 20px; '> <p> Please wait, processing... </p> </div> ";
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 (); // Center Method
}

ObjDIV. prototype. openLoading = function () {this. openBG (); openLoadDiv (this );}

QQ group: 77813547

After completing these steps, a simple pop-up loading layer will be completed. Is it a little sense of accomplishment, so proceed to other work! Since they all pop up, you have to remove them at a certain time. The following is the method to remove these layers.

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

If you want to display different layers of information, you can add different prototype attributes.

Specific instance:

<! DOCTYPE html> 





Tip: the code can be modified before running!