var aInput = document.getElementsByTagName("input");

  2     aInput[0].onclick = function() {

  3         var d1 = new Dialog();

  4         d1.init({ //配置参数

  5             iNum : 0, //在每个配置参数中设置一个唯一的标识

  6             title : "登录"

  7         });

  8     }

  9     aInput[1].onclick = function() {

 10         var d2 = new Dialog();

 11         d2.init({ //配置参数

 12             iNum : 1,

 13             w : 300,

 14             h : 500,

 15             dir : "right",

 16             title : "公告"

 17         });

 18     }

 19     aInput[2].onclick = function() {

 20         var d3 = new Dialog();

 21         d3.init({ //配置参数

 22             iNum : 2,

 23             w : 300,

 24             h : 500,

 25             dir : "left",

 26             title : "注意",

 27             mask : true

 28         });

 29     }

 30     function Dialog() {

 31         this.dialog = null;

 32         this.oMask = null;

 33         this.settings = { //默认参数

 34             w : 300,

 35             h : 300,

 36             dir : "center",

 37             mask : false

 38         }

 39     }

 40     Dialog.prototype.json = {};//加一个全局的json解决弹窗不断触发的问题

 41     Dialog.prototype.init = function( opts ) {

 42         extend(this.settings,opts);

 43         if(this.json[opts.iNum] == undefined) { //根据json对象访问配置参数中的对象是否唯一标识设置开关

 44             this.json[opts.iNum] = true; //利用开关原理解决弹窗不断触发的问题

 45         }

 46         if(this.json[opts.iNum]){

 47             this.FnCreate();//创建Dialog

 48             this.setData();//设置数据

 49             this.FnClose();//关闭弹窗

 50             if(this.settings.mask){

 51                 this.FnMask();//创建遮燥

 52             }

 53             this.json[opts.iNum] = false;

 54         }

 55

 56     }

 57     Dialog.prototype.FnCreate = function() {

 58         this.dialog = document.createElement("div");

 59         this.dialog.className = "dialog";

 60         this.dialog.innerHTML = '<div class="diaTop"> \

 61 <span class="title">'+this.settings.title+'</span> \

 62 <span class="close">X</span> \

 63 </div> ';

 64         document.body.appendChild( this.dialog );

 65     }

 66     Dialog.prototype.setData = function() {

 67         this.dialog.style.width = this.settings.w + "px";

 68         this.dialog.style.height = this.settings.h + "px";

 69         if(this.settings.dir == "center") {

 70             this.dialog.style.left = (viewWidth() - this.dialog.offsetWidth)/2 + "px";

 71             this.dialog.style.top = (viewHeight() - this.dialog.offsetHeight)/2 + "px";

 72         }else if(this.settings.dir = "right") {

 73             this.dialog.style.left = viewWidth() - this.dialog.offsetWidth + "px";

 74             this.dialog.style.top = viewHeight() - this.dialog.offsetHeight + "px";

 75         }else if(this.settings.dir == "left") {

 76             this.dialog.style.left = 0;

 77             this.dialog.style.top = viewHeight() - this.dialog.offsetHeight + "px";

 78         }

 79     }

 80     Dialog.prototype.FnClose = function() {

 81         var close = this.dialog.getElementsByTagName("span")[1];

 82         var This = this;

 83         close.onclick = function() {

 84             document.body.removeChild(This.dialog);

 85             if(This.settings.mask) {

 86                 document.body.removeChild(This.oMask);

 87             }

 88             This.json[This.settings.iNum] = true; //关闭时开关还原

 89         }

 90     }

 91     Dialog.prototype.FnMask = function() {

 92         this.oMask = document.createElement("div");

 93         this.oMask.id = "mask";

 94         document.body.appendChild(this.oMask);

 95         this.oMask.style.width = viewWidth() + "px";

 96         this.oMask.style.height = viewHeight() + "px";

 97     }

 98     function extend(obj1,obj2) {

 99         for(var attr in obj2) {

100             obj1[attr] = obj2[attr];

101         }

102     }

103     function viewWidth(){

104         return document.documentElement.clientWidth;

105     }

106     function viewHeight(){

107         return document.documentElement.clientHeight;

108     }
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style>

 *{margin:0;padding:0;}

 .dialog{position:absolute;border: solid 1px #000;z-index: 2;}

 .dialog .diaTop{width:100%;height:25px;background:black;color:white;}

 .dialog .diaTop .title{margin-left: 100px;}

 .dialog .diaTop .close{float:right;margin-right:10px;}

 #mask{background: #000; filter:alpha(opacity=50);opacity: .5;z-index: 1;}

 </style>

 </head>

 <body>

 <input type="button" value="btn1">

 <input type="button" value="btn2">

 <input type="button" value="btn3">

 <!-- <div class="dialog">

 <div class="diaTop">

 <span class="title">title</span>

 <span class="close">X</span>

 </div>

 </div> -->

 <!-- <div id="mask"></div> -->

 </body>

 <script>

 </script>

 </html>

基于面向对象js的弹窗的组件的开发案例的更多相关文章

  1. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  2. webpack4.5.0+vue2.5.16+vue-loader 实战组件化开发案例以及版本问题中踩的一些大坑!!!

    一 vue-loader 我们先不管脚手架,只说vue-loader,简单讲就是可将.vue文件打包,实现组件化开发,即一个.vue文件就是一个组件,开发中只需要引入这个.vue组件就可以了! 然后. ...

  3. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  4. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  5. 总结：iview（基于vue.js的开源ui组件）学习的一些坑

    1.要改变组件的样式 找到这个组件的class名,然后覆盖样式. 举例:修改select框,显示圆角.只需给找到类名并写样 .ivu-select-selection{ border-radius:1 ...

  6. 使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app

    近几年,混合模式移动应用的概念甚嚣尘上,受到了一些中小型企业的青睐,究其原因,混合模式开发可以比传统移动开发节约大量的开发成本和人力成本. Hybrid App(混合模式移动应用)是指介于web-ap ...

  7. 06Vue.js快速入门-Vue组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  8. Ext.js入门：常用组件与综合案例（七）

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

  9. 基于Taro.js和微信小程序云开发的移动端校园平台——《我的衡师》

    我学校教务处目前仅有电脑端,并不适配移动端,电脑端也只能使用IE6浏览器访问,兼容性差.我在没有api接口的情况下,通过Carles和Postman抓包,用node.js爬虫实现了后台和小程序的对接. ...

随机推荐

  1. 基于请求响应的MVC框架调用分析

    一.使用Servlet来处理请求响应 当client提交数据之后.接着发送请求,请求被封装成对象,server接收到请求,依据请求的URL.来推断将请求对象交由哪个Servlet处理. 在servle ...

  2. ios 文件上传， post数据

    转自:http://www.maxiaoguo.com/clothes/267.html 一.文件下载 获取资源文件大小有两张方式 1. HTTP HEAD方法 NSMutableURLRequest ...

  3. Oracle数据库备份恢复，巡检须要关注的对象设置以及相关恢复概述

    数据库备份恢复.巡检须要关注的对象设置: 1.数据库名称,以及DBID:  --dbid在v$database中     SYS@ORCL>select dbid,name from v$dat ...

  4. linux和unix的对照

    在之前的博客中说到,linux是一个单一内核的操作系统,但它与传统的单一内核UNIX操作系统不同. 在普通单一内核系统中,全部内核代码都是被静态编译和链接的. 而在linux中,能够动态的装入和卸载内 ...

  5. USACO2002 Open:雄伟的山峦

    简要题意: 奶牛们在落基山下避暑,从它们的房子向外望去,可以看到N 座山峰构成的山峦,奶牛发现每座山峰都是等腰三角形,底边长度恰好是高度的两倍.所以山峰的顶点坐标可由两个底部端点求出.设i 座第山峰的 ...

  6. Aizu - 2555 Everlasting Zero 模拟

    Aizu - 2555 Everlasting Zero 题意:学习技能,每个技能有不同的要求,问能否学习全部特殊技能 思路:枚举每两个技能,得到他们的先后学习关系,如果两个都不能先学的话就是No了, ...

  7. hbase启动报错:Java HotSpot(TM) 64-Bit Server VM warning: ignoring option PermSize=128m; support was removed in 8.0

    输入HBASE_MASTER_OPTS只是为了快速寻找这个选项而已,如果你手工找也可以 刚才那个命令回车后直接跳到这 前面加#就好了 修改后保存.重新启动hbase就好了. 注意:各个节点都要修改哦. ...

  8. 1.9 Python基础知识 - 数值运算

      一.数值运算 在Python中有丰富的算术运算,这使得Python在科学计算领域有着很高的地位,Python可以提供包括四则运算在内的各种算术运算. 算术运算符 运算符 含义 说明 优先级 实例 ...

  9. 打开文件对话框在xp和win7上的实现文件任意多选

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在xp系统上进行文件多选,实际上其文件字符串数组的缓冲区是有限,并不能支持选择任意多个文件,为此以前我还写过一篇文章: ...

  10. IBM软件技术峰会归来

    为期两天在北京国际饭店会议中心的IBM软件技术峰会已近结束,此次大会最大的收获是能和沃森实验室的王博士沟通探讨人工智能软件的发展问题.领略到IBM 云计算首席架构师Jason R.McGee如何呼风唤 ...