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:
The Code is as follows:
Function objDIV (){
This. bgp;
This. infop;
}
First, we want to bring up a mask layer. I will name it openBackDiv ();
The Code is as follows:
Function openBackDiv (txbp ){
Txbp. bgp = document. createElement ("p ");
Txbp. bgp. setAttribute ("id", "overDiv ");
Txbp. bgp. innerHTML = "";
}
In addition, add it to the prototype of the defined object (openBG ()):
The Code is as follows:
ObjDIV. prototype. openBG = function (){
OpenBackDiv (this );
Document. body. appendChild (this. bgp );
This. bgp. style. display = "block ";
This. bgp. style. width = document.doc umentElement. clientWidth + "px ";
This. bgp. 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 little rough.
The Code is as follows:
Function openLoadDiv (txbp ){
Txbp. infop = document. createElement ("p ");
Txbp. infop. setAttribute ("id", "p_info ");
Txbp. infop. innerHTML ="
Please wait. processing...
";
Document. body. appendChild (txbp. infop );
Txbp. infop. style. width = "550px ";
Txbp. infop. style. height = "270px ";
Txbp. infop. style. fontSize = "14px ";
Txbp. infop. style. position = "absolute ";
Txbp. infop. style. background = "# fff ";
Txbp. infop. style. zIndex = "9999 ";
Centerobject (); // Center Method
}
ObjDIV. prototype. openLoading = function () {this. openBG (); openLoadDiv (this );}
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.
The Code is as follows:
ObjDIV. prototype. removeBG = function (){
If (this. bgp | document. getElementById ("overDiv ")){
If (this. bgp ){
Document. body. removeChild (this. bgp );
} Else {
Document. body. removeChild (document. getElementById ("overDiv "));
}
}
}
ObjDIV. prototype. removeInfo = function (){
This. removeBG ();
If (this. infop ){
Document. body. removeChild (this. infop );
} Else {
Document. body. removeChild (document. getElementById ("p_info "));
}
}
If you want to display different layers of information, you can add different prototype attributes.
Complete code
[Code]
// ****** The js pop-up layer prompts txb20100110 ********//
Function objDIV (){
This. bgp;
This. infop;
}
ObjDIV. prototype. openBG = function (){
OpenBackDiv (this );
Document. body. appendChild (this. bgp );
This. bgp. style. display = "block ";
This. bgp. style. width = document.doc umentElement. clientWidth + "px ";
This. bgp. style. height = document.doc umentElement. 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. bgp | document. getElementById ("overDiv ")){
If (this. bgp ){
Document. body. removeChild (this. bgp );
} Else {
Document. body. removeChild (document. getElementById ("overDiv "));
}
}
}
ObjDIV. prototype. removeInfo = function (){
This. removeBG ();
If (this. infop ){
Document. body. removeChild (this. infop );
} Else {
Document. body. removeChild (document. getElementById ("p_info "));
}
}
Function openLoadDiv (txbp ){
Txbp. infop = document. createElement ("p ");
Txbp. infop. setAttribute ("id", "p_info ");
Txbp. infop. innerHTML ="
Please wait. processing...
";
Document. body. appendChild (txbp. infop );
Txbp. infop. style. width = "550px ";
Txbp. infop. style. height = "270px ";
Txbp. infop. style. fontSize = "14px ";
Txbp. infop. style. position = "absolute ";
Txbp. infop. style. background = "# fff ";
Txbp. infop. style. zIndex = "9999 ";
Centerobject ();
}
Function openBackDiv (txbp ){
Txbp. bgp = document. createElement ("p ");
Txbp. bgp. setAttribute ("id", "overDiv ");
// Alert(document.doc umentElement. clientWidth );
Txbp. bgp. innerHTML = "";
//"
";
// Txbp. openBG ();
}
Function openDiv (txbp ){
// Txbp. openBG ();
Txbp. infop = document. createElement ("p ");
Txbp. infop. setAttribute ("id", "p_info ");
Txbp. infop. innerHTML ="
Congratulations! Registration successful!
Please remember that your account: 5678537
";
Document. body. appendChild (txbp. infop );
Txbp. infop. style. width = "550px ";
Txbp. infop. style. height = "270px ";
Txbp. infop. style. fontSize = "14px ";
Txbp. infop. style. position = "absolute ";
Txbp. infop. style. background = "# fff ";
Txbp. infop. style. zIndex = "9999 ";
Centerobject ();
}
Function centerobject (){
If (document. getElementById ("overDiv ")){
Var objp = document. getElementById ("overDiv"). style;
Objp. height = document.doc umentElement. scrollHeight + "px ";
Objp. left = parseint(document.doc umentElement. clientWidth-parseInt (objp. width)/2) + "px ";
// Alert(document.doc umentElement. scrollHeight)
Objp. top = parseint(document.doc umentElement. clientHeight-parseInt (objp. height)/2) + "px ";
}
If (document. getElementById ("p_info ")){
Var p_info = document. getElementById ("p_info"). style;
P_info.left = parseint(document.doc umentElement. clientWidth-parseInt (p_info.width)/2) + "px ";
P_info.top = parseint(document.doc umentElement. clientHeight-parseInt (p_info.height)/2) + "px ";
}
}
Function centerDIV (objId ){
If (document. getElementById (objId )){
Var objp = document. getElementById (objId). style;
Objp. height = document. getElementById (objId). scrollHeight + "px ";
Objp. width = document. getElementById (objId). scrollWidth + "px ";
Objp. left = parseint(document.doc umentElement. clientWidth-parseInt (objp. width)/2) + "px ";
// Alert(document.doc umentElement. scrollHeight)
Objp. top = parseint(document.doc umentElement. clientHeight-parseInt (objp. height)/2) + "px ";
}
}
Function centerObj (obj ){
If (obj ){
Var objp = obj. style;
Objp. height = obj. scrollHeight + "px ";
Objp. width = obj. scrollWidth + "px ";
Objp. left = parseint(document.doc umentElement. clientWidth-parseInt (objp. width)/2) + "px ";
// Alert(document.doc umentElement. scrollHeight)
Objp. top = parseint(document.doc umentElement. clientHeight-parseInt (objp. height)/2) + "px ";
}
}
// Window. onresize = centerobject;
[Code]
Demo address http://demo.jb51.net/js/openp/openp.htm
