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>