最近做的一些功能需要用到Bootstrap，然而原来的系统并没有引入Bootstrap，为了新写的控件能够应用于老的页面，又不需要在老的页面上引入全套的Bootstrap文件决定写一个模仿Bootstrap样式的弹出框插件。
1 ; (function ($, window, document, undefined) { 2 var bsDialog = function (opt) { 3 var $this = this; 4 5 $this._default = { 6 showMask: true, 7 onInited: null, 8 showConfirm: false, 9 onConfirm: null, 10 hideAfterConfirm: true, 11 showCancel: false, 12 onCancel: null, 13 hideDialog: null, 14 dragable: false,//是否可拖动 15 title: "", 16 url: "", 17 content: "", 18 width: 400, 19 height: 200 20 }; 21 22 $this.option = $.extend(true, {}, $this._default, opt); 23 $this.option.showFoot = $this.option.showConfirm || $this.option.showCancel; 24 $this.controlId = $$.generateId(); 25 $this.mask = null; 26 $this.dialogBack = null; 27 $this.dialog = null; 28 } 29 30 bsDialog.prototype = { 31 showDialog: function () { 32 var $this = this; 33 34 $this.initCss(); 35 36 var dialogHtml = ""; 37 if ($this.option.showMask) { 38 dialogHtml += "\ 39 <div id='bsdm" + $this.controlId + "' class='bsd-mask'></div>"; 40 } 41 42 var dialogX = ($(window).width() - $this.option.width) / 2; 43 var dialogY = ($(window).height() - $this.option.height) / 4; 44 dialogHtml += "\ 45 <div id='bsdb" + $this.controlId + "' class='bsd-back'>\ 46 <div id='bsdc" + $this.controlId + "' class='bsd-container' style='width:" + $this.option.width + "px;height:" + $this.option.height + "px;left:" + dialogX + "px;top:" + (-$this.option.height / 4) + "px;'>\ 47 <div class='bsd-head' " + ($this.option.dragable ? "style='cursor:move;'" : "") + ">\ 48 <h4>" + $this.option.title + "</h4>\ 49 <span class='bsd-close'>×</span>\ 50 </div>\ 51 <div class='bsd-content'>"; 52 53 if (!$$.isNullOrWhiteSpace($this.option.url)) { 54 dialogHtml += "\ 55 <iframe src='" + $this.option.url + "'></iframe>"; 56 } else { 57 dialogHtml += $this.option.content; 58 } 59 60 dialogHtml += "\ 61 </div>\ 62 <div class='bsd-foot'>"; 63 64 if ($this.option.showConfirm) { 65 dialogHtml += "<span class='bsd-btn bsd-confirm'>确认</span>"; 66 } 67 68 if ($this.option.showCancel) { 69 dialogHtml += "<span class='bsd-btn bsd-cancel'>取消</span>"; 70 } 71 72 dialogHtml += "\ 73 </div>\ 74 </div>\ 75 </div>"; 76 77 $("body").append(dialogHtml); 78 $this.mask = $("#bsdm" + $this.controlId); 79 $this.dialogBack = $("#bsdb" + $this.controlId); 80 $this.dialog = $("#bsdc" + $this.controlId); 81 82 $this.mask.animate({ 83 opacity: 0.4 84 }, 200, function () { 85 $this.dialog.css({ 86 display: "block", 87 opacity: 1 88 }); 89 $this.dialog.animate({ 90 top: dialogY 91 }); 92 }); 93 94 $this.dialog.on("click", ".bsd-close", function () { 95 $this.close(); 96 }); 97 $this.dialog.on("click", ".bsd-confirm", function () { 98 if ($$.isFunction($this.option.onConfirm)) { 99 var result = $this.option.onConfirm(); 100 101 if (result && $this.option.hideAfterConfirm) { 102 $this.close(); 103 } 104 } else { 105 if ($this.option.hideAfterConfirm) { 106 $this.close(); 107 } 108 } 109 }); 110 $this.dialog.on("click", ".bsd-cancel", function () { 111 if ($$.isFunction($this.option.onCancel)) { 112 $this.option.onCancel(); 113 } 114 115 $this.close(); 116 }); 117 118 if ($this.option.dragable) { 119 $this.initDrag(); 120 } 121 }, 122 initCss: function () { 123 var $this = this; 124 125 var targetControl = $("head"); 126 if (targetControl.length == 0) { 127 targetControl = $("body"); 128 } 129 if (targetControl.length == 0) { 130 return; 131 } 132 133 if (targetControl.find("#bsDialogStyle").length == 0) { 134 var cssHtml = "\ 135 <style id='bsDialogStyle'>\ 136 .bsd-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: 0; z-index: 999998; }\ 137 .bsd-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rbga(0, 0, 0, 0); z-index: 999999; }\ 138 .bsd-container { display: none; position: relative; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,.5); background-color: #FFF; opacity: 0; z-index: 999999; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; }\ 139 .bsd-container .bsd-head { display: block; position: absolute; top: 0px; right: 0px; left: 0px; height: 56px; box-sizing: border-box; padding: 15px; border-bottom: 1px solid #e5e5e5; word-break: break-all; word-wrap: break-word; }\ 140 .bsd-container .bsd-head h4 { font-size: 18px; font-weight: 500; }\ 141 .bsd-container .bsd-close { display: inline-block; position: absolute; top: 14px; right: 12px; width: 20px; height: 20px; text-align: center; line-height: 18px; cursor: pointer; border: 1px solid #CCC; border-radius: 10px; }\ 142 .bsd-container .bsd-content { display: inline-block; position: absolute; top: 56px; right: 0px;"; 143 144 if ($this.option.showFoot) { 145 cssHtml += " bottom: 56px; left: 0px; border-radius: 0px; border-bottom: 1px solid #e5e5e5;"; 146 } else { 147 cssHtml += " bottom: 0px; left: 0px; border-radius: 0 0 6px 6px;"; 148 } 149 150 cssHtml += " overflow-x: auto; overflow-y: " + (!$$.isNullOrWhiteSpace($this.option.url) ? "hidden" : "auto;padding: 15px;") + "; }\ 151 .bsd-container .bsd-content iframe { border: none; width: 100%; height: 100%; }\ 152 .bsd-container .bsd-foot { display: inline-block; position: absolute; right: 0px; bottom: 0px; left: 0px; height: 56px; text-align: right; padding: 0 10px 0 0; cursor: pointer; }\ 153 .bsd-container .bsd-foot .bsd-btn { display: inline-block; padding: 6px 10px; border-radius: 4px; color: #FFF; margin: 15px 15px 0 0; }\ 154 .bsd-container .bsd-foot .bsd-btn.bsd-confirm { background-color: #D9534F; }\ 155 .bsd-container .bsd-foot .bsd-btn.bsd-confirm:hover { background-color: #C9302C; }\ 156 .bsd-container .bsd-foot .bsd-btn.bsd-cancel { background-color: #337AB7; }\ 157 .bsd-container .bsd-foot .bsd-btn.bsd-cancel:hover { background-color: #286090; }\ 158 </style>"; 159 160 targetControl.append(cssHtml); 161 } 162 }, 163 initDrag: function () { 164 var $this = this; 165 166 var $dialogHead = $this.dialog.find(".bsd-head"); 167 $dialogHead.on("mousedown", function (e) { 168 var offset = $this.dialog.offset(); 169 var divLeft = parseInt(offset.left, 10); 170 var divTop = parseInt(offset.top, 10); 171 var mousey = e.pageY; 172 var mousex = e.pageX; 173 $this.dialogBack.bind('mousemove', function (moveEvent) { 174 var left = divLeft + (moveEvent.pageX - mousex); 175 var top = divTop + (moveEvent.pageY - mousey); 176 $this.dialog.css({ 177 'top': top + 'px', 178 'left': left + 'px' 179 }); 180 181 return false; 182 }); 183 }); 184 $dialogHead.on("mouseup", function () { 185 $this.dialogBack.unbind("mousemove"); 186 }); 187 }, 188 close: function () { 189 var $this = this; 190 191 $this.dialog.animate({ 192 top: -$this.option.height / 4, 193 opacity: 0.3 194 }, 200, function () { 195 $this.dialog.remove(); 196 $this.dialogBack.remove(); 197 $this.mask.animate({ 198 opacity: 0 199 }, function () { 200 $this.mask.remove(); 201 }); 202 }); 203 } 204 } 205 206 $.extend({ 207 bsDialog: function (opt) { 208 var dialog = new bsDialog(opt); 209 210 dialog.showDialog(); 211 212 return dialog; 213 } 214 }); 215 })(jQuery, window, document, undefined);
1、弹出文本内容
1 $.bsDialog({ 2 dragable: true, 3 title: "测试弹出层", 4 content: "测试内容", 5 showConfirm: true, 6 onConfirm: function () { 7 alert("confirm click"); 8 9 return true; 10 }, 11 showCancel: true, 12 onCancel: function () { 13 alert("cancel click"); 14 }, 15 width: 400, 16 height: 200 17 });
2、弹出URL
1 $.bsDialog({ 2 dragable: true, 3 title: "测试弹出层", 4 url: "http://www.baidu.com", 5 width: 1200, 6 height: 860 7 });
