javascript面向对象的方式实现的弹出层效果代码


Posted in Javascript onJanuary 28, 2010

说到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.3water.com/js/opendiv/opendiv.htm

Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
jquery 常用操作方法
Jan 28 #Javascript
jquery 经典动画菜单效果代码
Jan 26 #Javascript
使用JQuery进行跨域请求
Jan 25 #Javascript
javascript 的Document属性和方法集合
Jan 25 #Javascript
起点页面传值js,有空研究学习下
Jan 25 #Javascript
js 巧妙去除数组中的重复项
Jan 25 #Javascript
将函数的实际参数转换成数组的方法
Jan 25 #Javascript
You might like
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
在视频前插入广告
2006/11/20 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python实现的一个简单LRU cache
2014/09/26 Python
python清理子进程机制剖析
2017/11/23 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python实现祝福弹窗效果
2019/04/07 Python
美国眼镜网站:LensCrafters
2020/01/19 全球购物
室内设计专业学生的自我评价分享
2013/11/27 职场文书
实习老师离校感言
2014/02/03 职场文书
广告宣传策划方案
2014/05/21 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
法制工作总结2015
2015/07/23 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android