由于本人以前是.net程序員，所以即使現(xiàn)在在做前端，也習(xí)慣于用面向?qū)ο蟮姆绞骄帉慾s腳本，我想如果你以前也是或者現(xiàn)在還是名第三代程序員的話，應(yīng)該對(duì)此并不陌生。
說到j(luò)s的面向?qū)ο�，就不得不提到prototype這個(gè)js內(nèi)置屬性了(注意：這里的prototype可不是prototype.js),它的作用就是可以動(dòng)態(tài)的向一個(gè)對(duì)象(object)添加某種屬性。我現(xiàn)在要做的就是盡可能的讓代碼達(dá)到公用，像繼承啦之類的。好了，這些就不多說了，對(duì)prototype不了解的可以搜索下相關(guān)內(nèi)容。
今天要做的是點(diǎn)擊一個(gè)html元素讓其彈出一個(gè)友好的對(duì)話框來，首先要明確兩點(diǎn)，一點(diǎn)是我可能會(huì)大量的用到這種方式，甚至不希望出現(xiàn)系統(tǒng)的alert或confirm，第二點(diǎn)就是彈出的內(nèi)容盡量的可以多種化，甚至可以自定義。明確這兩點(diǎn)后，我們就可以寫js代碼了，都是些很初級(jí)的東西，如果你要鄙視的話就盡情的鄙視我吧！^.^
首先定義一個(gè)簡(jiǎn)單的對(duì)象:
function objDIV() {
this.bgdiv ;
this.infodiv ;
}
首先，我們希望彈出一個(gè)遮罩層，我給它命名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>";
}
再者，把它添加到剛剛定義的對(duì)象的prototype里去(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";
}
再就是添加彈出信息層的方法,和上面一樣做就行了。所以才說這個(gè)是很基礎(chǔ)的東西，好像確實(shí)沒啥好說的，直接上代碼吧！
這是一個(gè)正在加載的彈出層，有點(diǎn)粗糙. 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;\"><img border=\"0\" src=\"../images/xtts.gif\" /></div><div style='padding:20px; font-size:14px; color:#b44201;'><div style='width:100px; float:left;margin:60px 0 0 60px; height:80px;'><img src='/images/business/loading.gif' width='100px' height='100' border='0'/></div><div style='float:left; width:250px;margin:90px 0 0 20px;'><p>請(qǐng)稍等，正在處理中...</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();//居中的方法
}
objDIV.prototype.openLoading = function() { this.openBG(); openLoadDiv(this); }
做完這些后一個(gè)簡(jiǎn)單的彈出加載層就完成了.是不是有點(diǎn)成就感了，那么接著完成其他的工作吧！既然都彈出了，總得在某個(gè)時(shí)刻把它們移掉吧，下面就是移除這些層的方法。
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"));
}
}
如果想彈出不同層信息的話，就可以添加不同的prototype屬性。
喜歡 
頂
難過
囧
圍觀
無聊
