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. Hadoop HDFS (4) Hadoop Archives

    用HDFS存储小文件是不经济的,由于每一个文件都存在一个block里,每一个block的metadata又在namenode的内存里存着,所以,大量的小文件.会吃掉大量的namenode的内存.(注意 ...

  2. UVa 112 树求和

    题意:给定一个数字,以及一个描写叙述树的字符序列,问存不存在一条从根到某叶子结点的路径使得其和等于那个数. 难点在于怎样处理字符序列.由于字符间可能有空格.换行等. 思路:本来想着用scanf的(后发 ...

  3. thinkphp5项目--企业单车网站（一）

    thinkphp5项目--企业单车网站(一) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...

  4. 洛谷P2598 [ZJOI2009]狼和羊的故事

    题目描述 “狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向．．．．．．” Orez听到这首歌,心想:狼和羊如此和谐,为什么不尝试羊狼合养呢?说干就干! Orez的羊狼圈 ...

  5. 突破极限 解决大硬盘上安装Sco Unix新思路

    突破极限 解决大硬盘上安装Sco Unix新思路 [url]http://os.51cto.com/art/200809/89750.htm[/url]       硬盘越做越大,然我喜欢让我忧.10 ...

  6. 分享一下js正则中惰性与贪婪

    首先引入一个介绍比较详细的网站 http://www.cnblogs.com/yuaima/p/5258513.html http://www.jb51.net/article/31491.htm 接 ...

  7. Vue或React多页应用脚手架

    https://github.com/zhujiasheng/vue-multipage https://github.com/MeCKodo/vue-multipage

  8. Django_模板HTML

  9. cogs 1456. [UVa 10881,Piotr's Ants]蚂蚁

    1456. [UVa 10881,Piotr's Ants]蚂蚁 ★   输入文件:Ants.in   输出文件:Ants.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述 ...

  10. Volitale

    例1 volatile提醒编译器它后面所定义的变量随时都有可能改变.因此编译后的程序每次须要存储或读取这个变量的时候,都会直接从变量地址中读取数据. 假设没有volatile关键字.则编译器可能优化读 ...