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 YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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中var_dump方法的使用详解
2013/06/24 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
CCPry JS类库 代码
2009/10/30 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python中标准模块importlib详解
2017/04/16 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
python实现分页效果
2017/10/25 Python
python实现kNN算法
2017/12/20 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
高中生学习总结的自我评价范文
2013/10/13 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
网站美工岗位职责
2014/04/02 职场文书
竞赛口号大全
2014/06/16 职场文书
2015年双拥工作总结
2015/04/08 职场文书
学校捐款活动总结
2015/05/09 职场文书
肖申克救赎观后感
2015/06/02 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
python微信智能AI机器人实现多种支付方式
2022/04/12 Python