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 相关文章推荐
jquery中 $.expr使用实例介绍
Jun 09 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
js实现简单模态框实例
Nov 16 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
原生JavaScript实现换肤
Feb 19 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
linux php mysql数据库备份实现代码
2009/03/10 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
python操作字典类型的常用方法(推荐)
2016/05/16 Python
python实现linux下抓包并存库功能
2018/07/18 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python 文件数据读写的具体实现
2020/01/24 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
三年级学生评语
2014/04/23 职场文书
单位承诺书格式
2014/05/21 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers