Create a pop-up layer in JavaScript-oriented fashion

Since I was a. NET programmer before, so even now in the front-end, but also accustomed to the object-oriented way to write JS script, I think if you are or now still a third generation of programmers, it should be not unfamiliar.

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 of the heartily despise me!^.^

First, define a simple object:

function Objdiv () {

This.bgdiv;

This.infodiv;

}

First, we want to pop a mask layer, I give it name Openbackdiv ();

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 you just defined (OPENBG ()):

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. function Openloaddiv (txbdiv) {

Txbdiv.infodiv = document.createelement ("div");

Txbdiv.infodiv.setAttribute ("id", "div_info");

Txbdiv.infodiv.innerHTML = "

Please wait a moment, in the process of ...

 

";

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 doing this, a simple pop-up loading layer is completed. Is it a bit of a sense of accomplishment, 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.

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.