When it comes to JS object-oriented, we have to mention prototype this JS built-in properties (note: The prototype here is not prototype.js), its role is to be able to dynamically add some attributes to an object. All I have to do now is to get the code as common as possible, like inheritance. Well, this is not much to say, prototype do not understand the relevant content can be searched.
The thing to do today is to click an HTML element to let it pop up in a friendly dialog box, first of all to clear two points, one point is that I may use a large number of this way, and even do not want to appear system alert or confirm, the 2nd is the content of the pop-up can be multiple, even can be customized. Clear this two point, we can write the JS code, are some very elementary things, if you want to despise the words will heartily despise me! ^.^
First, define a simple object:
Copy Code code as follows:
function Objdiv () {
This.bgdiv;
This.infodiv;
}
First, we want to pop a mask layer, I give it name Openbackdiv ();
Copy Code code 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>";
}
Furthermore, add it to the prototype of the object you just defined (OPENBG ()):
Copy Code code 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 the pop-up information layer method, and the same as above to do the line. So just say this is a very basic thing, it seems that there is no talk, directly on the code!
This is a loaded pop-up layer, a bit rough.
Copy Code code 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 a moment, is processing the ...</p></div></div></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 ()//centered method
}
objDIV.prototype.openLoading = function () {THIS.OPENBG (); Openloaddiv (this);}
After these, a simple pop-up loading layer is complete. Is it a bit of a sense of achievement, then finish the rest of the work! Now that it's all popped up, you have to move them away at some point, and here's how to remove those layers.
Copy Code code 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 pop up different layers of information, you can add different prototype properties.
The complete code
[Code]
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.documentElement.clientWidth + "px";
This.bgdiv.style.height = document.documentElement.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 a moment, is processing the ...</p></div></div></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.documentElement.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, register successfully!</p><p> please remember your account number: <font color=\ "#b44201 \" id=\ "orpai_id\" >5678537</font></p></div><div style=\ "margin:0 auto;\" >< Input type= ' button ' value= ' confirms ' onclick= ' new Objdiv (). Removeinfo (); ' /></div></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.documentElement.scrollHeight + "px";
Objdiv.left = parseint ((Document.documentelement.clientwidth-parseint (Objdiv.width))/2 + "px";
Alert (document.documentElement.scrollHeight)
Objdiv.top = parseint ((Document.documentelement.clientheight-parseint (Objdiv.height))/2 + "px";
}
if (document.getElementById ("Div_info")) {
var div_info = document.getElementById ("Div_info"). Style;
Div_info.left = parseint ((Document.documentelement.clientwidth-parseint (Div_info.width))/2 + "px";
Div_info.top = parseint ((Document.documentelement.clientheight-parseint (Div_info.height))/2 + "px";
}
}
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.documentelement.clientwidth-parseint (Objdiv.width))/2 + "px";
Alert (document.documentElement.scrollHeight)
Objdiv.top = parseint ((Document.documentelement.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.documentelement.clientwidth-parseint (Objdiv.width))/2 + "px";
Alert (document.documentElement.scrollHeight)
Objdiv.top = parseint ((Document.documentelement.clientheight-parseint (Objdiv.height))/2 + "px";
}
}
Window.onresize = Centerobject;
[Code]
Demo Address http://demo.jb51.net/js/opendiv/opendiv.htm
