js组件--自定义弹框
javascript自定义弹框
性能太差，有很大的改善空间
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!--<link href="styles/reset.css" type="text/css" rel="stylesheet">--> 7 <link href="styles/bootstrap.min.css" rel="stylesheet" type="text/css"> 8 <style type="text/css"> 9 /*自定义弹框*/ 10 .Nomand_dialog{position: fixed;top:0;;left: 0;right: 0;bottom: 0;overflow: hidden;z-index: 1000;} 11 .modal-dialog{display: none;top:-400px;} 12 </style> 13 </head> 14 <body> 15 <a href="javascript:;">click me--Alert</a> 16 <a href="javascript:;">click me--Confirm</a> 17 <a href="javascript:;">click me--dialog</a> 18 </body> 19 <script src="js/jquery-1.9.1.min.js"></script> 20 <script> 21 22 //Nomand 23 if(typeof jQuery ==='undefined'){ 24 throw new Error('Nomand\'s JavaScript requires jQuery') 25 } 26 27 +function ($) { 28 'use strict'; 29 var version = $.fn.jquery.split(' ')[0]; 30 console.log('You use the jQuery\'s version is '+version); 31 }(jQuery); 32 33 +function (window,jQuery) { 34 35 'use strict'; 36 37 function Nomand_dialog(){ 38 39 var config={}; 40 this.config=config; 41 this.set=function(n,v){ 42 config[n]=v; 43 }; 44 this.get= function (n) { 45 return config[n] 46 }; 47 this.init(); 48 this.bindEvents(); 49 50 } 51 //目前确定的程序 52 // Alert有title message btn(1个确定) 53 // Confirm 有 title message btn(2个，确定和取消)，callback--》2个 54 //dialog 有 title message content(input，textarea，form) callback（若干个） 55 //对于data-dialog 为close的是关闭弹出框 56 var HTMLs= { 57 //弹出框主题框架 58 box: '<div class="Nomand_dialog" style="display: none;">' //自定义DIV，便于操作 59 + 60 '<div class="modal-backdrop fade in" style="height:100%;"></div>' //遮罩层 61 + 62 '<div class="modal-dialog">' //dialog层 63 + 64 '<div class="modal-content">' //dialog主体内容，里面加上header content footer 65 + 66 '</div>' 67 + 68 '</div>' 69 + 70 '</div>', 71 //弹出框的头部，也就是title 72 header: '<div class="modal-header">' 73 + 74 '<button type="button" data-dialog="close" class="close">×</button>' //关闭按钮 75 + 76 '<h4 class="modal-title Nomand-dialog-title"></h4>' //添加的自定义title，便于操作 77 + 78 '</div>', 79 //弹出框的body 80 body: '<div class="modal-body">' 81 + 82 '<div class="Nomand-dialog-content"></div>' //添加自定义content，便于操作 83 + 84 '</div>', 85 //弹出框footer 也是就control区域 86 footer: '<div class="modal-footer Nomand-dialog-footer"></div>', //添加自定义的btn，便于操作 87 88 89 button: '<button type="button" class=""></button>' 90 } 91 Nomand_dialog.version='1.0.1'; 92 Nomand_dialog.require='jQuery bootstrap'; 93 Nomand_dialog.prototype={ 94 init: function () { 95 var body=jQuery('body'); 96 this.set('body',body); 97 }, 98 bindEvents: function () { 99 var body=this.get('body'); 100 var _this=this; 101 var _body=body; 102 //点击关闭按钮 103 body.on('click','button[data-dialog="close"]', function (e) { 104 _this.destroyDom(); 105 }) 106 107 //键盘esc控制 108 body.on('keyup', function (e) { 109 var keyCode= e.keyCode; 110 if( jQuery('.Nomand-dialog').css('display') == 'block' && keyCode=== 27 ){ 111 _this.destroyDom(); 112 } 113 }) 114 //callback-yes 115 body.on('click','button[data-dialog="yes"]', function (e) { 116 var yesCallback=_this.get('btn_yes_callback'); 117 yesCallback && yesCallback(); 118 119 }) 120 //callback-no 121 body.on('click','button[data-dialog="no"]', function (e) { 122 var noCallback=_this.get('btn_no_callback'); 123 noCallback && noCallback(); 124 125 }) 126 127 }, 128 bindDom2: function () { 129 var num=2; 130 var _this=this; 131 var wholeNum=this.get('num'); 132 var body=this.get('body'); 133 134 for(var m=2;m<wholeNum;m++){ 135 (function (m) { 136 body.on('click','button[data-dialog="btn'+m+'"]', function (e) { 137 _this.get('btn'+m+'callback')() 138 }) 139 })(m) 140 } 141 142 143 }, 144 alert:function(json){ 145 //判定页面当中是否存在dialog框，不存在就重新添加到DOM 146 if(jQuery('.Nomand_dialog').length == 0) { 147 var body = this.get('body'); 148 149 body.append(HTMLs.box); 150 151 jQuery('.Nomand_dialog').fadeIn(); 152 153 var arrAlert = []; 154 arrAlert.push(HTMLs.header, HTMLs.body, HTMLs.footer); 155 156 for (var p in arrAlert) { 157 jQuery('.modal-content').append(arrAlert[p]) 158 } 159 160 if (typeof json === 'object') { 161 var jsonLength = 0; 162 for (var m in json) { 163 jsonLength++ 164 } 165 if (jsonLength !== 3) { 166 throw new Error('参数错误,该json对象只支持3个属性,title,message,btn对象') 167 } 168 var btn = HTMLs.button.replace('class="">', 'data-dialog ="close" class="' + json.btn.class + '">' + json.btn.label + ''); 169 jQuery('.Nomand-dialog-title').text(json.title); 170 jQuery('.Nomand-dialog-content').html(json.message); 171 } else { 172 jQuery('.Nomand-dialog-title').text(json); 173 } 174 175 jQuery('.Nomand-dialog-footer').append(btn); 176 177 jQuery('.modal-dialog').animate({top: 0, opacity: 'show'}, 350); 178 }else{ 179 //存在dialog就先动画，然后更改内容 180 jQuery('.modal-dialog').animate({top:-400},300, function () { 181 //判断传入的json是否是json，不是就直接添加内容 182 if(typeof json === 'object'){ 183 if(typeof json.message === 'undefined'){ 184 throw new Error('Alert 需要 message 属性') 185 } 186 if(typeof json.title === 'undefined'){ 187 json.title='' 188 } 189 if(typeof json.btn.class === 'undefined'){ 190 json.btn.class='btn btn-danger' 191 } 192 if(typeof json.btn.label === 'undefined'){ 193 json.btn.label='确定' 194 } 195 jQuery('.Nomand-dialog-title').text(json.title); 196 jQuery('.Nomand-dialog-content').html(json.message); 197 var btn = HTMLs.button.replace('class="">', 'data-dialog ="close" class="'+ json.btn.class+'" >'+json.btn.label+''); 198 }else{ 199 jQuery('.Nomand-dialog-title').text(''); 200 jQuery('.Nomand-dialog-content').html(json); 201 var btn = HTMLs.button.replace('class="">', 'data-dialog ="close" class="btn btn-danger">确定'); 202 } 203 jQuery('.Nomand-dialog-footer').html(btn); 204 jQuery('.modal-dialog').animate({top: 0, opacity: 'show'}, 350); 205 }); 206 } 207 }, 208 confirm: function (json) { 209 var jsonLength=0; 210 var body=this.get('body'); 211 for(var m in json){ 212 jsonLength++ 213 } 214 if(jsonLength !== 3){ 215 throw new Error('参数错误,该json对象有4个属性,title,message,2个btn对象') 216 } 217 if(typeof json.btn.yes.callback === 'undefined' || typeof json.btn.no.callback === 'undefined'){ 218 throw new Error('参数错误,confirm需要callback') 219 } 220 221 var body=this.get('body'); 222 body.append(HTMLs.box); 223 jQuery('.Nomand_dialog').fadeIn(); 224 225 var arrAlert=[]; 226 var arrBtn=[]; 227 arrAlert.push(HTMLs.header,HTMLs.body,HTMLs.footer) 228 var btn1=HTMLs.button.replace('class="">','data-dialog ="no" class="'+ json.btn.yes.class+'">'+ json.btn.yes.label+''); 229 var btn2=HTMLs.button.replace('class="">','data-dialog ="yes" class="'+ json.btn.no.class+'">'+ json.btn.no.label+''); 230 arrBtn.push(btn1,btn2) 231 arrBtn.reverse(); 232 for(var p in arrAlert){ 233 jQuery('.modal-content').append(arrAlert[p]) 234 } 235 for(var n in arrBtn){ 236 jQuery('.Nomand-dialog-footer').append(arrBtn[n]); 237 } 238 239 jQuery('.Nomand-dialog-title').text(json.title) 240 241 jQuery('.Nomand-dialog-content').html(json.message); 242 243 jQuery('.modal-dialog').animate({top:0,opacity:'show'},350) 244 245 this.set('btn_yes_callback',json.btn.yes.callback); 246 this.set('btn_no_callback',json.btn.no.callback); 247 248 249 }, 250 dialog: function (json) { 251 var _this=this; 252 var jsonLength=0; 253 var num=2; 254 if(typeof json.title == 'undefined' || typeof json.message == 'undefined' || typeof json.buttons == 'undefined'){ 255 throw new Error('dialog配置参数不全'); 256 }else{ 257 var body=this.get('body'); 258 259 //button参数 260 var objBtn =json.buttons; 261 var arrBtn=[]; 262 for(var p in objBtn){ 263 jsonLength++; 264 switch (p){ 265 case 'yes': 266 var cancelBtn=HTMLs.button.replace('class="">','data-dialog ="no" class="'+ json.buttons.yes.class+'">'+ json.buttons.yes.label+''); 267 arrBtn.push(cancelBtn); 268 this.set('btn_yes_callback',json.buttons.yes.callback); 269 break; 270 case 'no': 271 var sureBtn=HTMLs.button.replace('class="">','data-dialog ="yes" class="'+ json.buttons.no.class+'"> '+ json.buttons.no.label+''); 272 arrBtn.push(sureBtn); 273 this.set('btn_no_callback',json.buttons.no.callback); 274 break; 275 default: 276 if(num>jsonLength){ 277 return ; 278 } 279 var defalutBtn=HTMLs.button.replace('class="">','data-dialog="btn'+num+'" class="'+ json.buttons[p].class+'">'+ json.buttons[p].label+''); 280 this.set('btn'+num+'callback', json.buttons[p].callback); 281 arrBtn.push(defalutBtn); 282 num++; 283 } 284 } 285 this.set('num',num) 286 this.bindDom2(); 287 arrBtn.reverse(); 288 body.append(HTMLs.box); 289 jQuery('.Nomand_dialog').fadeIn(); 290 var arrDialog=[]; 291 arrDialog.push(HTMLs.header,HTMLs.body,HTMLs.footer) 292 for(var p in arrDialog){ 293 jQuery('.modal-content').append(arrDialog[p]) 294 } 295 for(var p in arrBtn){ 296 jQuery('.modal-footer').append(arrBtn[p]) 297 } 298 jQuery('.Nomand-dialog-title').text(json.title) 299 jQuery('.Nomand-dialog-content').html(json.message); 300 jQuery('.modal-dialog').animate({top:0,opacity:'show'},350); 301 } 302 }, 303 createDom: function () { 304 }, 305 destroyDom: function () { 306 var _this=this; 307 jQuery('.modal-dialog').animate({top:-400},300, function () { 308 jQuery('div').remove('.Nomand_dialog'); 309 }); 310 } 311 }; 312 var obj=new Nomand_dialog(); 313 window.alert= function (str) { 314 obj.alert.call(obj,str); 315 } 316 window.confirm= function (str,callback) { 317 obj.confirm.call(obj,str,callback); 318 } 319 window.dialog= function (json) { 320 obj.dialog.call(obj,json) 321 } 322 323 324 325 326 327 328 var jsonDialog={title:'你要干什么？不要非礼我哦', 329 message:'大家好,很高兴见到各位,我是dialog,支持<code>title</code>,<code>message</code>,<code>callback</code>,<br>当然我必须支持<code>HTML</code>标记我是独立的挂在<code>window</code>下的方法', 330 buttons:{ 331 yes:{ 332 label:'有什么好玩的,再见', 333 class:'btn btn-danger', 334 callback: function () { 335 alert({ 336 title:'我也爱你？', 337 message:'我好爱你哦', 338 btn:{ 339 label:'好难过,就要分别了', 340 class:'btn btn-info' 341 } 342 }); 343 } 344 }, 345 no:{ 346 label:'i love you', 347 class:'btn btn-success', 348 callback: function () { 349 alert({ 350 title:'你想咋地？', 351 message:'再见，不送，就你？小样', 352 btn:{ 353 label:'那好吧,再见', 354 class:'btn btn-danger' 355 } 356 }); 357 } 358 }, 359 btn1:{ 360 label:'info', 361 class:'btn btn-info', 362 callback: function () { 363 alert(' i am callback 1') 364 } 365 }, 366 btn2:{ 367 label:'primary', 368 class:'btn btn-primary', 369 callback: function () { 370 alert(' i am callback 2') 371 } 372 }, 373 btn3:{ 374 label:'default', 375 class:'btn btn-default', 376 callback: function () { 377 alert(' i am callback 3') 378 } 379 }, 380 btn4:{ 381 label:'warning', 382 class:'btn btn-warning', 383 callback: function () { 384 alert(' i am callback 4') 385 } 386 } 387 } 388 }; 389 function showDialog(){ 390 dialog(jsonDialog); 391 } 392 //alert 393 var jsonAlert={ 394 title:'我是Alert弹出框', 395 message:'i am Alert<br>我支持<code>HTML</code>标记<br>我只有' + 396 '<code>title</code>,<code>message</code>和一个<code>btn</code><sub>object</sub>,而且这个btn没有<code>callback</code>,单纯的退出' + 397 '<br>如果传入的<code>json</code>对象属性错误会报错,详见<code>F12</code>', 398 btn:{ 399 label:'WQNMLB,这么简单，我走了', 400 class:'btn btn-danger' 401 } 402 }; 403 function showAlert(){ 404 alert(jsonAlert) 405 } 406 //confirm 407 var jsonConfirm={ 408 title:'我是Confirm弹出框', 409 message:'i am Confirm<br>我支持<code>HTML</code>标记<br>我有' + 410 '<code>title</code>,<code>message</code>和两个<code>btn</code><sub>object</sub>,而且btn都有<code>callback</code>' + 411 '<br>如果传入的<code>json</code>对象属性错误会报错,详见<code>F12</code>', 412 btn: { 413 yes: { 414 label: 'WQNMLB,这么简单，我走了', 415 class: 'btn btn-danger', 416 callback: function () { 417 alert('你是好人') 418 } 419 }, 420 no: { 421 label: '哇哈,这么牛逼,我再看看', 422 class: 'btn btn-success', 423 callback: function () { 424 alert('你是坏银') 425 } 426 } 427 } 428 }; 429 function showConfirm(){ 430 confirm(jsonConfirm); 431 } 432 433 jQuery('a:eq(0)').click(function () { 434 showAlert(); 435 }) 436 jQuery('a:eq(1)').click(function () { 437 showConfirm(); 438 }) 439 jQuery('a:eq(2)').click(function () { 440 showDialog(); 441 }) 442 }(window,jQuery) 443 444 </script> 445 </html>
