自定义Bootstrap样式弹出框

 最近做的一些功能需要用到Bootstrap，然而原来的系统并没有引入Bootstrap，为了新写的控件能够应用于老的页面，又不需要在老的页面上引入全套的Bootstrap文件决定写一个模仿Bootstrap样式的弹出框插件。

  1 var bsDialog = function (opt) {
  2         var $this = this;
  3 
  4         $this._default = {
  5             showMask: true,
  6             onInited: null,
  7             showConfirm: false,
  8             onConfirm: null,
  9             hideAfterConfirm: true,
 10             showCancel: false,
 11             onCancel: null,
 12             onClose: null,
 13             dragable: false,//是否可拖动
 14             title: "",
 15             url: "",
 16             content: "",
 17             width: 400,
 18             height: 200
 19         };
 20 
 21         $this.option = $.extend(true, {}, $this._default, opt);
 22         $this.controlId = $$.generateId();
 23         $this.mask = null;
 24         $this.dialogBack = null;
 25         $this.dialog = null;
 26 
 27         if ($$.isFunction($this.option.onConfirm)) {
 28             $this.option.showConfirm = true;
 29         }
 30 
 31         if ($$.isFunction($this.option.onCancel)) {
 32             $this.option.showCancel = true;
 33         }
 34 
 35         $this.option.showFoot = $this.option.showConfirm || $this.option.showCancel;
 36     }
 37 
 38     bsDialog.prototype = {
 39         showDialog: function () {
 40             var $this = this;
 41 
 42             $this.initCss();
 43 
 44             var dialogHtml = "";
 45             if ($this.option.showMask) {
 46                 dialogHtml += "\
 47 
";
 48             }
 49 
 50             var dialogX = ($(window).width() - $this.option.width) / 2;
 51             var dialogY = ($(window).height() - $this.option.height) / 4;
 52             dialogHtml += "\
 53 
\
 54     
\
 55         
\
 56             this.option.dragable ? "style='cursor:move;'" : "") + ">" + $this.option.title + "\
 57             ×\
 58         
\
 59         
";
 60             
 61             if (!$$.isNullOrWhiteSpace($this.option.url)) {
 62                 dialogHtml += "\
 63             ";
 64             } else {
 65                 dialogHtml += $this.option.content;
 66             }
 67 
 68             dialogHtml += "\
 69         
";
 70             
 71             if ($this.option.showFoot) {
 72                 dialogHtml += "\
 73         
";
 74 
 75                 if ($this.option.showConfirm) {
 76                     dialogHtml += "确认";
 77                 }
 78 
 79                 if ($this.option.showCancel) {
 80                     dialogHtml += "取消";
 81                 }
 82 
 83                 dialogHtml += "\
 84         
";
 85             }
 86 
 87             dialogHtml += "\
 88     
\
 89 
";
 90 
 91             var $body = $("body");
 92             $body.append(dialogHtml);
 93             var beforeWidth = $body.width();
 94             $body.addClass("bsd-dialog-open");
 95             var afterWidth = $body.width();
 96             if (afterWidth > beforeWidth) {
 97                 $body.css({
 98                     "padding-right": ($$.soe($$.soe($body.css("padding-right")).trimRight("px")).toFloat() + afterWidth - beforeWidth) + "px"
 99                 });
100             }
101             
102             $this.mask = $("#bsdm" + $this.controlId);
103             $this.dialogBack = $("#bsdb" + $this.controlId);
104             $this.dialog = $("#bsdc" + $this.controlId);
105 
106             $this.mask.animate({
107                 opacity: 0.5
108             }, 200, function () {
109                 $this.dialog.css({
110                     display: "block",
111                     opacity: 1
112                 });
113                 $this.dialog.animate({
114                     top: dialogY
115                 }, 300);
116             });
117 
118             $this.dialog.on("click", ".bsd-close", function () {
119                 $this.close();
120             });
121             $this.dialog.on("click", ".bsd-confirm", function () {
122                 if ($$.isFunction($this.option.onConfirm)) {
123                     var result = $this.option.onConfirm();
124 
125                     if (result && $this.option.hideAfterConfirm) {
126                         $this.close();
127                     }
128                 } else {
129                     if ($this.option.hideAfterConfirm) {
130                         $this.close();
131                     }
132                 }
133             });
134             $this.dialog.on("click", ".bsd-cancel", function () {
135                 if ($$.isFunction($this.option.onCancel)) {
136                     $this.option.onCancel();
137                 }
138 
139                 $this.close();
140             });
141 
142             if ($this.option.dragable) {
143                 $this.initDrag();
144             }
145 
146             if ($$.isFunction($this.option.onInited)) {
147                 $this.option.onInited($this.dialog);
148             }
149         },
150         initCss: function () {
151             var $this = this;
152 
153             var targetControl = $("head");
154             if (targetControl.length == 0) {
155                 targetControl = $("body");
156             }
157             if (targetControl.length == 0) {
158                 return;
159             }
160 
161             if (targetControl.find("#bsDialogStyle").length == 0) {
162                 var cssHtml = "\
163 ";
181 
182                 targetControl.append(cssHtml);
183             }
184         },
185         initDrag: function () {
186             var $this = this;
187 
188             var $dialogHead = $this.dialog.find(".bsd-head");
189             $dialogHead.on("mousedown", ":not(.bsd-close)", function (e) {
190                 var position = $this.dialog.position();
191                 var divLeft = parseInt(position.left, 10);
192                 var divTop = parseInt(position.top, 10);
193                 var mousey = e.pageY;
194                 var mousex = e.pageX;
195                 $this.dialogBack.bind('mousemove', function (moveEvent) {
196                     var left = divLeft + (moveEvent.pageX - mousex);
197                     var top = divTop + (moveEvent.pageY - mousey);
198                     $this.dialog.css({
199                         'top': top + 'px',
200                         'left': left + 'px'
201                     });
202 
203                     return false;
204                 });
205             });
206             $dialogHead.on("mouseup", function () {
207                 $this.dialogBack.unbind("mousemove");
208             });
209         },
210         close: function () {
211             var $this = this;
212 
213             var $body = $("body");
214             var beforeWidth = $body.width();
215             $body.removeClass("bsd-dialog-open");
216             var afterWidth = $body.width();
217             if (beforeWidth > afterWidth) {
218                 $body.css({
219                     "padding-right": ($$.soe($$.soe($body.css("padding-right")).trimRight("px")).toFloat() - (beforeWidth - afterWidth)) + "px"
220                 });
221             }
222 
223             $this.dialog.animate({
224                 top: -$this.option.height / 4,
225                 opacity: 0
226             }, 200, function () {
227                 $this.dialog.remove();
228                 $this.dialogBack.remove();
229                 $this.mask.animate({
230                     opacity: 0
231                 }, function () {
232                     $this.mask.remove();
233                     if ($$.isFunction($this.option.onClose)) {
234                         $this.option.onClose();
235                     }
236                 });
237             });
238         }
239     }
240 
241     $.extend({
242         bsDialog: function (opt) {
243             var dialog = new bsDialog(opt);
244 
245             dialog.showDialog();
246 
247             return dialog;
248         }
249     });

View Code

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 });

转载于:https://www.cnblogs.com/zcr-yu/p/9187853.html