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. windows linux 双系统默认启动windows 的几种方法

    装了双系统后,在开机时总会有想让一个系统默认启动的时候,一般安装完Ubuntu和XP双系统后,开机时默认的是启动Ubuntu系统,可是当想让XP作为默认启动的系统时怎么办呢? 在早期的Ubuntu系统 ...

  2. 在Mac OS X上安装使用lazarus 1.6.4

    一直觉得delphi的OO做得比C++还完善, 但如今日落西真是让人感到唏嘘,  这并不意味着delphi比C++差, 它的创始人被微软挖墙脚后创造了C#系列开发工具, 设计理念大部分与Delphi相 ...

  3. acme.sh建立SAN证书 和泛域名证书

    文件来源 https://github.com/Neilpang/acme.sh/wiki/How-to-issue-a-cert domain=$domain time=`date +%Y%m%d% ...

  4. Python str 与 bytes 类型（Python2/3 对 str 的处理）

    本文均在 Python 3 下测试通过,python 2.x 会略有不同. 1. str/bytes >> s = '123' >> type(s) str >> ...

  5. POJ 1610 Count the Colors

    Count the Colors Time Limit: 2 Seconds      Memory Limit: 65536 KB Painting some colored segments on ...

  6. 本地用户 vsftpd 配置文件

    # 禁止匿名用户anonymous登录 anonymous_enable=NO # 允许本地用户登录 local_enable=YES local_root=/data/wwwroot/ # 让登录的 ...

  7. fgrep---指定的输入文件中的匹配模式的行

    fgrep命令是用来搜索 file 参数指定的输入文件(缺省为标准输入)中的匹配模式的行.fgrep 命令特别搜索 Pattern 参数,它们是固定的字符串.如果在 File 参数中指定一个以上的文件 ...

  8. Android开发系列（十六）：【Android小游戏成语连连看】第二篇

    写的晚了,在分工个Z市高中的一个成绩查询的系统,原系统居然是用VB写的,我不得不佩服原本写系统的那位哥们真能耐得住. 明天搭建下SVN就等着先发project款然后開始项目了.想想有工资进账,心里也为 ...

  9. 測试password强度

    <html> <!--激情在最后面.请看最后面红色字 这是是个计算password强度的实例 网上有非常多这种样例 只是呢,都不怎么好 这是我写的一个完整的效果,能够通用, new一 ...

  10. QCAD Plugin 开发

    QCAD Plugin 开发 eryar@163.com Abstract. QCAD是基于GPL协议的开源CAD软件,核心功能基于Qt使用C++开发,界面及其交互使用Javascript脚本进行开发 ...