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中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
Drupal简体中文语言包安装教程
2014/09/27 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
Yarn的安装与使用详细介绍
2016/10/25 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python数组过滤实现方法
2015/07/27 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
自我鉴定三原则
2014/01/13 职场文书
国庆节标语大全
2014/10/08 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang