基于面向对象js的弹窗的组件的开发案例 

 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     }
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style>
 7 *{margin:0;padding:0;}
 8 .dialog{position:absolute;border: solid 1px #000;z-index: 2;}
 9 .dialog .diaTop{width:100%;height:25px;background:black;color:white;}
10 .dialog .diaTop .title{margin-left: 100px;}
11 .dialog .diaTop .close{float:right;margin-right:10px;}
12 #mask{background: #000; filter:alpha(opacity=50);opacity: .5;z-index: 1;}
13 </style>
14 </head>
15 <body>
16 <input type="button" value="btn1">
17 <input type="button" value="btn2">
18 <input type="button" value="btn3">
19 <!-- <div class="dialog">
20 <div class="diaTop">
21 <span class="title">title</span>
22 <span class="close">X</span>
23 </div>
24 </div> -->
25 <!-- <div id="mask"></div> -->
26 </body>
27 <script>
28 
29 </script>
30 </html>

 

posted @ 2017-09-14 17:30  seafwg  阅读(470)  评论(0)    收藏  举报