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. hdoj--3123--GCC（技巧阶乘取余）

    GCC Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Subm ...

  2. snowflake算法

    snowflake算法思考 缘起 为什么会突然谈到分布式唯一id呢?原因是最近在准备使用RocketMQ,看看官网介绍: 一句话,消息可能会重复,所以消费端需要做幂等.为什么消息会重复后续Rocket ...

  3. SpringMVC+MyBatis （druid、logback）

    数据库连接池是阿里巴巴的druid.日志框架式logback 1.整合SpringMVCspringMybatis-servlet.xml: <?xml version="1.0&qu ...

  4. Json 序列化以及反序列化的三种方式（二）

    1.什么是JSON? Json[javascript对象表示方法],它是一个轻量级的数据交换格式,我们可以很简单的来读取和写它,并且它很容易被计算机转化和生成,它是完全独立于语言的 2.Json支持下 ...

  5. 8种提升 ASP.NET Web API 性能的方法

  6. Atcoder Grand Contest 107 A Biscuits

    A - Biscuits Time limit : 2sec / Memory limit : 256MB Score : 200 points Problem Statement There are ...

  7. BZOJ3130: [Sdoi2013]费用流(二分，最大流)

    Description Alice和Bob在图论课程上学习了最大流和最小费用最大流的相关知识.    最大流问题:给定一张有向图表示运输网络,一个源点S和一个汇点T,每条边都有最大流量.一个合法的网络 ...

  8. Scrapy框架使用代理

    使用代理抓取https://www.baidu.com/s?wd=ip # -*- coding: utf-8 -*- ''' 一.在settings.py中开启中间件 DOWNLOADER_MIDD ...

  9. 摄像头驱动——V4L2框架分析

    一.概述 Video for Linux 2,简称V4l2,是Linux内核中关于视频设备的内核驱动框架,为上层的访问底层的视频设备提供了统一的接口. 摄像头驱动是属于字符设备驱动程序.(分析linu ...

  10. HDU 3714 Error Curves

    Error Curves 思路:这个题的思路和上一个题的思路一样,但是这个题目卡精度,要在计算时,卡到1e-9. #include<cstdio> #include<cstring& ...