说到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

　　推荐阅读

　　js 多层叠的TAB选项卡

HTML：多个导航tag加一个放置默认内容div 脚本：以数组的形式给出每个导航对应的html 多层叠TAB选项卡 .nonstop { width:168px; font-size:12px;margin:auto; border:1px solid #cdcdcd; padd>>>详细阅读

本文标题：javascript面向对象的方式实现的弹出层效果代码

地址：http://www.17bianji.com/kaifa2/JS/27161.html

 1/2    1