javascript物件導向的方式實現的彈出層效果代碼

來源:互聯網
上載者:User

說到js的物件導向,就不得不提到prototype這個js內建屬性了(注意:這裡的prototype可不是prototype.js),它的作用就是可以動態向一個對象(object)添加某種屬性。我現在要做的就是儘可能的讓代碼達到公用,像繼承啦之類的。好了,這些就不多說了,對prototype不瞭解的可以搜尋下相關內容。

今天要做的是點擊一個html元素讓其彈出一個友好的對話方塊來,首先要明確兩點,一點是我可能會大量的用到這種方式,甚至不希望出現系統的alert或confirm,第二點就是彈出的內容盡量的可以多種化,甚至可以自訂。明確這兩點後,我們就可以寫js代碼了,都是些很初級的東西,如果你要鄙視的話就盡情的鄙視我吧!^.^

首先定義一個簡單的對象:

複製代碼 代碼如下:function objDIV() {
this.bgdiv ;
this.infodiv ;
}

首先,我們希望彈出一個遮罩層,我給它命名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>";

}

再者,把它添加到剛剛定義的對象的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";
}

再就是添加彈出資訊層的方法,和上面一樣做就行了。所以才說這個是很基礎的東西,好像確實沒啥好說的,直接上代碼吧!

這是一個正在載入的彈出層,有點粗糙. 複製代碼 代碼如下: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>請稍等,正在處理中...</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); }

做完這些後一個簡單的彈出載入層就完成了.是不是有點成就感了,那麼接著完成其他的工作吧!既然都彈出了,總得在某個時刻把它們移掉吧,下面就是移除這些層的方法。 複製代碼 代碼如下: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屬性。
完整的代碼
[code]

//******js彈出層提示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;\"><img border=\"0\" src=\"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='loading.gif' width='100px' height='100' border='0'/></div><div style='float:left; width:250px;margin:90px 0 0 20px;'><p>請稍等,正在處理中...</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;\"><img border=\"0\" src=\"xtts.gif\" /></div><div style=\"padding:20px;\"><div style=\"width:120px; float:left;\"><img src=\"xin.gif\" /></div><div style=\"float:right; width:350px;color:#b44201;\" id=\"showdivinfo\"><p>恭喜您,註冊成功!</p><p>請牢記您的帳號:<font color=\"#b44201\" id=\"orpai_ID\">5678537</font></p></div><div style=\"margin:0 auto;\"><input type='button' value='確認' 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]
示範地址 http://demo.jb51.net/js/opendiv/opendiv.htm

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: