1. 首页 > 电脑教程 > 用javascript面向对象的方式制作弹出层

用javascript面向对象的方式制作弹出层

由于本人以前是.net程序员,所以即使现在在做前端,也习惯于用面向对象的方式编写js脚本,我想如果你以前也是或者现在还是名第三代程序员的话,应该对此并不陌生。

说到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 = "";

} 再者,把它添加到刚刚定义的对象的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 = "

声明:希维路由器教程网提供的内容,仅供网友学习交流,如有侵权请与我们联系删除,谢谢。ihuangque@qq.com
本文地址:https://www.ctrlcv.com.cn/diannao/169349040911151.html