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 try to makeCodeTo achieve public, 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:
Copy code The Code is as follows: function objdiv (){
This. bgdiv;
This. infodiv;
}
First, we want to bring up a mask layer. I will name it openbackdiv ();Copy codeThe Code is as follows: 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 ()):Copy codeThe 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.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 little 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 = "<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 );}
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.Copy codeThe 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 "));
}
}
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. bgdiv;
This. infodiv;
}
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 ";
}
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 = "<Div style = \" line-Height: 1.5; Background: url(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 ();
}
Function openbackdiv (txbdiv ){
Txbdiv. bgdiv = Document. createelement ("Div ");
Txbdiv. bgdiv. setattribute ("ID", "overdiv ");
// Alert(document.doc umentelement. clientwidth );
Txbdiv. bgdiv. innerhtml = "<IFRAME frameborder = \" NO \ "class = \" overpanel \ "id = \" ifrover \ "> </iframe> ";
// "<Div id = \" overpanel \ "> <IFRAME frameborder = \" NO \ "class = \" overpanel \ "id = \" ifrover \ "> </iframe> </div> ";
// Txbdiv. openbg ();
}
Function opendiv (txbdiv ){
// Txbdiv. openbg ();
Txbdiv. infodiv = Document. createelement ("Div ");
Txbdiv. infodiv. setattribute ("ID", "div_info ");
Txbdiv. infodiv. innerhtml = "<Div style = \" line-Height: 1.5; Background: url(tips-top-bg.gif) Repeat-X; Height: 54px; text-align: center; \ "> </div> <Div style = \" padding: 20px; \ "> <Div style = \" width: 120px; float: left; \ "> </div> <Div style = \" float: Right; width: 350px; color: # b44201; \ "id = \" showdivinfo \ "> <p> congratulations, registration successful! </P> <p> keep in mind your account: <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> ";
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.doc umentelement. scrollheight + "PX";
objdiv. left = parseint(document.doc umentelement. clientwidth-parseint (objdiv. width)/2) + "PX";
// alert(document.doc umentelement. scrollheight)
objdiv. top = parseint(document.doc umentelement. clientheight-parseint (objdiv. height)/2) + "PX";
}< br> If (document. getelementbyid ("div_info") {
var div_info = document. getelementbyid ("div_info "). style;
div_info.left = parseint(document.doc umentelement. clientwidth-parseint (div_info.width)/2) + "PX";
div_info.top = parseint(document.doc umentelement. clientheight-parseint (div_info.height)/2) + "PX";
}< BR >}
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.doc umentelement. clientwidth-parseint (objdiv. width)/2) + "PX ";
// Alert(document.doc umentelement. scrollheight)
Objdiv. Top = parseint(document.doc umentelement. 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.doc umentelement. clientwidth-parseint (objdiv. width)/2) + "PX";
// alert(document.doc umentelement. scrollheight)
objdiv. top = parseint(document.doc umentelement. clientheight-parseint (objdiv. height)/2) + "PX";
}< BR >}< br> // window. onresize = centerobject;
[Code]
demo address http://demo.jb51.net/js/opendiv/opendiv.htm