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. php实现模拟登陆

    在不考虑验证码的情况一下,php实现模拟登陆,网上给的办法通常是採用curl来模拟实现,可是curl实现的是server端与server端建立了会话,仅仅能模拟登陆之后获取登陆之后的数据.无法将coo ...

  2. php中对象转数组有哪些方法（总结测试）

    php中对象转数组有哪些方法(总结测试) 一.总结 一句话总结:json_decode(json_encode($array),true)和array强制转换(或带递归) 1.array方式强制转换对 ...

  3. Entity Framework介绍和DBFirst开发方式

    一.ORM概念  什么是ORM? 对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术.简单来说,就是将关系型数 ...

  4. quartz 添加监听器listener

    全局注册,所有Job都会起作用 JobCountListener listener = new JobCountListener(); sched.getListenerManager().addJo ...

  5. 如何搭建Eclipse +Apache Tomcat配置Java开发环境

    Linux平台下如何搭建Eclipse +Apache Tomcat配置的Java开发环境 本文出自 "李晨光原创技术博客" 博客,请务必保留此出处http://chenguang ...

  6. react 组件使用的小记第一天

    //定义一个子组件 var Child = React.createClass({ getInitialState: function() { return {liked: false}; }, ha ...

  7. SQL server 事务介绍,创建与使用

    事务(Transaction)事务是一种机制,一个操作序列,包含一组操作指令,并且把所有的命令作为一个整体一起向系统提交或撤销操作请求(即要么全部执行,要么全部不执行)---------------- ...

  8. 把华为交换机设置成时钟源服务器（NTP）

    把华为交换机设置成时钟源服务器(NTP),提供给下面客户端Linux服务器使用, 1,先设置交换机的时区,和正确时间 # 假设地理位置在中国北京,设置本地时区名称为BJ. 如果系统默认的UTC是伦敦时 ...

  9. Java main方法中的String[] args

    -- Java 命令行参数 -- 关于其中的args以及public static / static public Java 命令行参数 前面已经看到多个使用Java数组的示例,每一个Java应用程序 ...

  10. JS之闭包详细解读

    闭包在红宝书中的解释就是:有权访问另一个函数作用域中的变量的函数. 1.变量作用域 全局变量:所有的函数外部定义的变量,它的作用域是整个script. 局部变量:定义在函数体内部的变量,作用域仅限于函 ...