位置: 编程技术 - 正文

javascript面向对象的方式实现的弹出层效果代码(javascript面向对象 第三方类库)

编辑:rootadmin

说到js的面向对象,就不得不提到prototype这个js内置属性了(注意:这里的prototype可不是prototype.js),它的作用就是可以动态的向一个对象(object)添加某种属性。我现在要做的就是尽可能的让代码达到公用,像继承啦之类的。好了,这些就不多说了,对prototype不了解的可以搜索下相关内容。 今天要做的是点击一个html元素让其弹出一个友好的对话框来,首先要明确两点,一点是我可能会大量的用到这种方式,甚至不希望出现系统的alert或confirm,第二点就是弹出的内容尽量的可以多种化,甚至可以自定义。明确这两点后,我们就可以写js代码了,都是些很初级的东西,如果你要鄙视的话就尽情的鄙视我吧!^.^ 首先定义一个简单的对象: 首先,我们希望弹出一个遮罩层,我给它命名openBackDiv(); 再者,把它添加到刚刚定义的对象的prototype里去(openBG()): 再就是添加弹出信息层的方法,和上面一样做就行了。所以才说这个是很基础的东西,好像确实没啥好说的,直接上代码吧! 这是一个正在加载的弹出层,有点粗糙. 做完这些后一个简单的弹出加载层就完成了.是不是有点成就感了,那么接着完成其他的工作吧!既然都弹出了,总得在某个时刻把它们移掉吧,下面就是移除这些层的方法。 如果想弹出不同层信息的话,就可以添加不同的prototype属性。 完整的代码 [code] //******js弹出层提示txb********// 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:px; text-align:center;"><img border="0" src="xtts.gif" /></div><div style='padding:px; font-size:px; color:#b;'><div style='width:px; float:left;margin:px 0 0 px; height:px;'><img src='loading.gif' width='px' height='' border='0'/></div><div style='float:left; width:px;margin:px 0 0 px;'><p>请稍等,正在处理中...</p></div></div></div>"; document.body.appendChild(txbdiv.infodiv); txbdiv.infodiv.style.width = "px"; txbdiv.infodiv.style.height = "px"; txbdiv.infodiv.style.fontSize = "px"; txbdiv.infodiv.style.position = "absolute"; txbdiv.infodiv.style.background = "#fff"; txbdiv.infodiv.style.zIndex = ""; 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:px; text-align:center;"><img border="0" src="xtts.gif" /></div><div style="padding:px;"><div style="width:px; float:left;"><img src="xin.gif" /></div><div style="float:right; width:px;color:#b;" id="showdivinfo"><p>恭喜您,注册成功!</p><p>请牢记您的账号:<font color="#b" id="orpai_ID"></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 = "px"; txbdiv.infodiv.style.height = "px"; txbdiv.infodiv.style.fontSize = "px"; txbdiv.infodiv.style.position = "absolute"; txbdiv.infodiv.style.background = "#fff"; txbdiv.infodiv.style.zIndex = ""; 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] 演示地址

推荐整理分享javascript面向对象的方式实现的弹出层效果代码(javascript面向对象 第三方类库),希望有所帮助,仅作参考,欢迎阅读内容。

javascript面向对象的方式实现的弹出层效果代码(javascript面向对象 第三方类库)

文章相关热门搜索词:javascript面向对象编程指南 pdf,javascript面向对象精要pdf,javascript面向对象编程指南,javascript面向对象精要pdf,javascript面向对象精要pdf,javascript面向对象编程指南,javascript面向对象精要pdf,javascript面向对象编程,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript面向对象之静态与非静态类 直到有那么一天,我开始在js中拼凑DOM标签,而且需要不停的拼凑,我发现我的代码变得愈发的丑陋,不仅上是代码简洁的问题,甚至有时候还引发了

js 面向对象的技术创建高级 Web 应用程序 JavaScript对象是词典在C++或C#中,在谈论对象时,是指类或结构的实例。对象有不同的属性和方法,具体取决于将它们实例化的模板(即类)。而JavaScript

JavaScript 面向对象代码实践 因此很有必要在这里为同学们举一个例子:JavaScript面向对象代码示例[Ctrl+A全选注:如需引入外部Js需刷新才能执行]

标签: javascript面向对象 第三方类库

本文链接地址:https://www.jiuchutong.com/biancheng/386524.html 转载请保留说明!

上一篇:JavaScript 使用简略语法创建对象的代码(js如何使用)

下一篇:JavaScript面向对象之静态与非静态类(javascript面向对象吗)

  • 个人所得税C表怎么填写
  • 什么情况下纳税人和负税人一致
  • 增值税普通发票查询真伪
  • 一个月没有账务往来,现金日记账如何登记?
  • 其他应收款财务报表取数
  • 代销商品怎么交增值税
  • 印花税多报了几块钱税务局会找我吗
  • 应付利润借方有余额怎么处理
  • 个体每月开票超10万
  • 差旅费报销单是外来原始凭证吗
  • 合同资产在资产负债表中列入什么项目
  • 事业单位法人证书查询
  • 房地产公司销售商品房属于增值税征收范围吗
  • 菜场摊位租赁合同
  • 商业折扣应交税费
  • 缴纳土地增值税
  • 政府补助款提现流程
  • 政府补贴项目账务怎么做
  • 公司增值税进项税不够还有什么办法处理
  • 顾客办理会员卡要退怎么办
  • 股权转让能否低于股价
  • 企业借款利息税前扣除怎么算
  • 破产清算重整和解
  • 公司预付的货款怎么做账
  • 收购破产债权
  • 进口料件和出口成品的关系
  • 应收账款周转天数正常范围
  • 酒店客房收入怎么算
  • 外观设计专利费减
  • 公司开业需要怎么布置
  • 摊余成本等于什么
  • 微软正在更新office
  • vantUI van-picker中的column使用,picker选择器展示对象数组里面的属性,自定义展示数据
  • 分期收款销售商品纳税义务发生时间
  • 基础代谢
  • 滴滴打车电子普票可以抵扣进项税额吗
  • 小规模纳税人企业所得税税收优惠政策
  • php curl命令详解
  • 经典动画动漫
  • 交易性金融资产的入账价值
  • 什么情况下专票税率为1
  • 出口没有增值税发票需要交税吗
  • 厂房出租一年多少钱
  • 以前年度多计提折旧
  • 紫白择日法实例详解
  • 营业外支出的内容包括
  • 电子发票怎么开具流程呢?
  • 购买材料增值税税率
  • 补交土地税要交多少钱
  • 生育津贴是怎么申请
  • 固定资产错记到费用了怎么办
  • 购进固定资产的账务处理
  • 持有至到期投资和债权投资的区别
  • 收到的发票未抵税怎么办
  • 以旧换新价格怎么确认
  • 首次购买金税盘及服务费的账务处理
  • 固定资产报废处理中,最终的净损益应作为
  • 应收账款贷方余额应与什么科目合并后填入报表
  • 本月应负担的修理费
  • 等额本金还款计算公式
  • 年底需要结转的会计科目
  • 企业的盈余公积包括哪些
  • linux系统中安装软件
  • linux 更新系统
  • apache是什么文件
  • 系统技巧 制作流程
  • awk正则表达式中引入变量
  • win7电脑桌面图标不见了右键也没用
  • pc guide
  • w7提高开机速度
  • win7的注册表在哪里打开
  • perl中\s+
  • python怎么用命令行
  • python迭代器的作用
  • shell监控端口状态
  • js tab选项卡
  • 上海地铁直接刷银联卡
  • 如何理解税收的本质
  • 广东省广州市国家安全局
  • 增值税发票税款数额是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设