最近做的一些功能需要用到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 <div id='bsdm" + $this.controlId + "' class='bsd-mask'></div>";
48 }
49
50 var dialogX = ($(window).width() - $this.option.width) / 2;
51 var dialogY = ($(window).height() - $this.option.height) / 4;
52 dialogHtml += "\
53 <div id='bsdb" + $this.controlId + "' class='bsd-back'>\
54 <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;'>\
55 <div class='bsd-head'>\
56 <span class='bsd-title' " + ($this.option.dragable ? "style='cursor:move;'" : "") + ">" + $this.option.title + "</span>\
57 <span class='bsd-close'>×</span>\
58 </div>\
59 <div class='bsd-content' style='" + ($this.option.showFoot ? "bottom: 56px; border-radius: 0px; border-bottom: 1px solid #e5e5e5;" : "bottom: 0px; border-radius: 0 0 6px 6px;") + (!$$.isNullOrWhiteSpace($this.option.url) ? "overflow-y: hidden;" : "overflow-y: auto;padding: 15px;") + "'>";
60
61 if (!$$.isNullOrWhiteSpace($this.option.url)) {
62 dialogHtml += "\
63 <iframe src='" + $this.option.url + "'></iframe>";
64 } else {
65 dialogHtml += $this.option.content;
66 }
67
68 dialogHtml += "\
69 </div>";
70
71 if ($this.option.showFoot) {
72 dialogHtml += "\
73 <div class='bsd-foot'>";
74
75 if ($this.option.showConfirm) {
76 dialogHtml += "<span class='bsd-btn bsd-confirm'>确认</span>";
77 }
78
79 if ($this.option.showCancel) {
80 dialogHtml += "<span class='bsd-btn bsd-cancel'>取消</span>";
81 }
82
83 dialogHtml += "\
84 </div>";
85 }
86
87 dialogHtml += "\
88 </div>\
89 </div>";
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 <style id='bsDialogStyle'>\
164 .bsd-dialog-open { overflow: hidden; }\
165 .bsd-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: 0; z-index: 9998; }\
166 .bsd-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0); z-index: 9999; }\
167 .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; }\
168 .bsd-container .bsd-head { display: block; position: absolute; top: 0px; right: 0px; left: 0px; height: 56px; box-sizing: border-box; padding: 0 15px; border-bottom: 1px solid #e5e5e5; word-break: break-all; word-wrap: break-word; }\
169 .bsd-container .bsd-head .bsd-title { display: inline-block; font-size: 18px; line-height: 56px; font-weight: 500; width: 100%; }\
170 .bsd-container .bsd-close { display: inline-block; position: absolute; top: 14px; right: 12px; width: 20px; height: 20px; font-size: 24px; text-align: center; line-height: 18px; cursor: pointer; color: #CCC; }\
171 .bsd-container .bsd-close:hover { color: #808080; }\
172 .bsd-container .bsd-content { display: inline-block; position: absolute; top: 56px; right: 0px; left: 0px; overflow-x: auto; }\
173 .bsd-container .bsd-content iframe { border: none; width: 100%; height: 100%; overflow: auto; }\
174 .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; }\
175 .bsd-container .bsd-foot .bsd-btn { display: inline-block; padding: 6px 10px; border-radius: 4px; color: #FFF; margin: 15px 15px 0 0; }\
176 .bsd-container .bsd-foot .bsd-btn.bsd-confirm { background-color: #D9534F; }\
177 .bsd-container .bsd-foot .bsd-btn.bsd-confirm:hover { background-color: #C9302C; }\
178 .bsd-container .bsd-foot .bsd-btn.bsd-cancel { background-color: #337AB7; }\
179 .bsd-container .bsd-foot .bsd-btn.bsd-cancel:hover { background-color: #286090; }\
180 </style>";
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 });
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
