├── .gitignore
├── LICENSE
├── _config.yml
├── demo
    ├── blank-ajax-response.html
    └── bootstrap-modal-demo.html
├── dist
    └── bootstrap-modal-wrapper-factory.min.js
├── gulpfile.js
├── js
    └── bootstrap-modal-wrapper-factory.js
├── nbproject
    ├── project.properties
    └── project.xml
├── package-lock.json
├── package.json
└── readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | # OS or Editor folders
2 | .DS_Store
3 | .idea
4 | npm-debug.log
5 | # Folders to ignore
6 | node_modules
7 | /nbproject/private/
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 JavaTMP (http://www.javatmp.com)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/demo/blank-ajax-response.html:
--------------------------------------------------------------------------------
 1 | <div class="dynamic-ajax-content">
 2 |     <div class="row">
 3 |         <div class="col-lg-12">
 4 |             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
 5 |             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
 6 |             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
 7 |             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
 8 |             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
 9 |             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
10 |         </div>
11 |     </div>
12 |     <script type="text/javascript">
13 |         jQuery(function ($) {
14 |             // here we can reference the container bootstrap modal by its id
15 |             // passed as parameter to request by name "ajaxModalId"
16 |             // or for demo purposese ONLY we can get a reference top modal
17 |             // in current open managed instances in BootstrapModalWrapperFactory
18 |             var currentParentModal = BootstrapModalWrapperFactory.globalModals[BootstrapModalWrapperFactory.globalModals.length - 1];
19 |             $("#" + currentParentModal.options.id).on(currentParentModal.options.ajaxContainerReadyEventName, function (event, modal) {
20 | 
21 |                 modal.addButton({
22 |                     label: "Update closable by backdrop click",
23 |                     cssClass: "btn btn-info",
24 |                     action: function (button, buttonData, originalEvent) {
25 |                         this.updateClosableByBackdrop(true);
26 |                     }
27 |                 });
28 |                 modal.addButton({
29 |                     label: "Show Ajax Parameters",
30 |                     cssClass: "btn btn-info",
31 |                     action: function (button, buttonData, originalEvent) {
32 |                         alert("modal.options.ajax is [" + JSON.stringify(this.options.ajax) + "]");
33 |                     }
34 |                 });
35 |                 modal.addButton({
36 |                     label: "Show localData Object",
37 |                     cssClass: "btn btn-info",
38 |                     action: function (button, buttonData, originalEvent) {
39 |                         alert("You can Use the following data came from initiator sender code : " + JSON.stringify(this.options.localData));
40 |                     }
41 |                 });
42 |                 modal.addButton({
43 |                     label: "Run Function from Sender",
44 |                     cssClass: "btn btn-info",
45 |                     action: function (button, buttonData, originalEvent) {
46 |                         this.options.localData.funRef();
47 |                     }
48 |                 });
49 |                 modal.addButton({
50 |                     label: "Close",
51 |                     cssClass: "btn btn-primary",
52 |                     action: function (button, buttonData, originalEvent) {
53 |                         return this.hide();
54 |                     }
55 |                 });
56 |                 modal.addButton({
57 |                     label: "Show Alert Dialog",
58 |                     cssClass: "btn btn-success",
59 |                     action: function (button, buttonData, originalEvent) {
60 |                         BootstrapModalWrapperFactory.alert("Alert Modal Created From within Ajax Content");
61 |                     }
62 |                 });
63 |             });
64 |         });
65 |     </script>
66 | </div>


--------------------------------------------------------------------------------
/demo/bootstrap-modal-demo.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en" dir="ltr">
  3 |     <head>
  4 |         <title>Bootstrap Modal Wrapper Plugin Demo</title>
  5 |         <!-- Required meta tags -->
  6 |         <meta charset="utf-8">
  7 |         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8 |         <!-- Bootstrap CSS -->
  9 |         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 10 |     </head>
 11 |     <body>
 12 |         <div class="container-fluid">
 13 |             <div class="row">
 14 |                 <div class="col">
 15 |                     <h1 class="mt-3 text-primary">Bootstrap Modal Wrapper Plugin Demo</h1>
 16 |                     <h2 class="mt-3 text-primary">Predefined Modal Types</h2>
 17 |                     <button id="simple-message" type="button" class="btn btn-primary">
 18 |                         Basic Message
 19 |                     </button>
 20 |                     <button id="simple-alert" type="button" class="btn btn-primary">
 21 |                         Basic Alert
 22 |                     </button>
 23 |                     <button id="simple-confirm" type="button" class="btn btn-primary">
 24 |                         Basic Confirm
 25 |                     </button>
 26 |                     <h2 class="mt-3 text-primary">Using Generic Modal Factory's createModal method</h2>
 27 |                     <button id="onlyBody" type="button" class="btn btn-primary">
 28 |                         Only Body
 29 |                     </button>
 30 |                     <button id="onlyBodyWithHeader" type="button" class="btn btn-primary">
 31 |                         Body & Title
 32 |                     </button>
 33 |                     <button id="disableClose" type="button" class="btn btn-primary">
 34 |                         Disable Close
 35 |                     </button>
 36 |                     <button id="disableCloseBackdrop" type="button" class="btn btn-primary">
 37 |                         Disable Close & Backdrop
 38 |                     </button>
 39 |                     <button id="multiModal" type="button" class="btn btn-primary">
 40 |                         Multi Modals
 41 |                     </button>
 42 |                     <button id="longBodyContent" type="button" class="btn btn-primary">
 43 |                         Long Body Content
 44 |                     </button>
 45 |                     <button id="h1ForTitle" type="button" class="btn btn-primary">
 46 |                         H1 for title
 47 |                     </button>
 48 |                     <button id="fullscreenfeatures" type="button" class="btn btn-primary">
 49 |                         Fullscreen modal
 50 |                     </button>
 51 |                     <button id="customTemplateForButtons" type="button" class="btn btn-primary">
 52 |                         A link for buttons
 53 |                     </button>
 54 | 
 55 |                     <h2 class="mt-3 text-primary">Update Contents on the fly</h2>
 56 |                     <button id="updateTitleContent" type="button" class="btn btn-primary">
 57 |                         Update Title and Content
 58 |                     </button>
 59 |                     <button id="updateModalSize" type="button" class="btn btn-primary">
 60 |                         Update Modal Size
 61 |                     </button>
 62 |                     <button id="updateButtons" type="button" class="btn btn-primary">
 63 |                         Update Buttons
 64 |                     </button>
 65 |                     <button id="ajaxContent" type="button" class="btn btn-primary">
 66 |                         Fake Ajax Content Uploader
 67 |                     </button>
 68 |                     <h2 class="mt-3 text-primary">Bootstrap Ajax Content Modal</h2>
 69 |                     <button id="ajaxContentinSmallModal" type="button" class="btn btn-primary m-3">
 70 |                         Remote Ajax Content Fetcher in Small Modal
 71 |                     </button>
 72 |                     <button id="ajaxContentinDefaultModal" type="button" class="btn btn-primary m-3">
 73 |                         Remote Ajax Content Fetcher in Default Modal
 74 |                     </button>
 75 |                     <button id="ajaxContentinLargeModal" type="button" class="btn btn-primary m-3">
 76 |                         Remote Ajax Content Fetcher in Large Modal
 77 |                     </button>
 78 |                     <button id="ajaxContentinXLargeModal" type="button" class="btn btn-primary m-3">
 79 |                         Remote Ajax Content Fetcher in X Large Modal
 80 |                     </button>
 81 |                     <button id="ajaxContentinSmallToXLargeModal" type="button" class="btn btn-primary m-3">
 82 |                         Remote Ajax Content Fetcher in Small then X large Modal
 83 |                     </button>
 84 | 
 85 |                     <h2 class="mt-3 text-primary">Original Bootstrap events</h2>
 86 |                     <button id="logConsoleModal" type="button" class="btn btn-primary">
 87 |                         Log Events On the console
 88 |                     </button>
 89 |                     <h2 class="mt-3 text-primary">Centered Bootstrap Modals</h2>
 90 |                     <button id="centeredBootModal" type="button" class="btn btn-primary">
 91 |                         Centered Bootstrap Modal
 92 |                     </button>
 93 |                 </div>
 94 |             </div>
 95 |         </div>
 96 | 
 97 |         <!-- JavaScript Libraries -->
 98 |         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 99 |         <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
100 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
101 |         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
102 |         <script src="../dist/bootstrap-modal-wrapper-factory.min.js" type="text/javascript"></script>
103 |         <style type="text/css">
104 |             .bootstrap-modal-wrapper-fullscreen {
105 |                 position: fixed;
106 |                 top: 0;
107 |                 right: 0;
108 |                 bottom: 0;
109 |                 left: 0;
110 |                 overflow: hidden;
111 |             }
112 |             .bootstrap-modal-wrapper-fullscreen .modal-dialog {
113 |                 position: fixed;
114 |                 margin: 0;
115 |                 width: 100%;
116 |                 height: 100%;
117 |                 padding: 0;top: 0;
118 |                 right: 0;
119 |                 bottom: 0;
120 |                 left: 0;
121 |                 max-height: 100%;
122 |                 max-width: 100%;
123 |                 display: flex;
124 |             }
125 |             .bootstrap-modal-wrapper-fullscreen .modal-dialog .modal-content {
126 |                 height: 100vh;
127 |                 max-height: 100vh;
128 |                 overflow: hidden;
129 |             }
130 |             .bootstrap-modal-wrapper-fullscreen .modal-dialog .modal-content .modal-header,
131 |             .bootstrap-modal-wrapper-fullscreen .modal-dialog .modal-content .modal-footer {
132 |                 flex-shrink: 0;
133 |             }
134 |             .bootstrap-modal-wrapper-fullscreen .modal-dialog .modal-content .modal-body {
135 |                 overflow-y: auto;
136 |             }
137 |         </style>
138 |         <script type="text/javascript">
139 |             jQuery(function ($) {
140 |                 console.log("initial z-index [" + BootstrapModalWrapperFactory.options.starterZIndex + "]");
141 |                 BootstrapModalWrapperFactory.options.starterZIndex = 15000;
142 |                 console.log("initial z-index after update [" + BootstrapModalWrapperFactory.options.starterZIndex + "]");
143 |                 $("#simple-message").on("click", function (event) {
144 |                     BootstrapModalWrapperFactory.showMessage("Delfault Message to show to user");
145 |                 });
146 |                 $("#simple-alert").on("click", function (event) {
147 |                     BootstrapModalWrapperFactory.alert("Delfault alert <b>with only message</b>");
148 |                 });
149 |                 $("#simple-confirm").on("click", function (event) {
150 |                     BootstrapModalWrapperFactory.confirm({
151 |                         title: "Confirm",
152 |                         message: "Are You Sure ?",
153 |                         onConfirmAccept: function () {
154 |                             BootstrapModalWrapperFactory.alert("Thank you for ACCEPTING the previous confiramtion dialog");
155 |                         },
156 |                         onConfirmCancel: function () {
157 |                             BootstrapModalWrapperFactory.alert("Thank you for CANCELING the previous confiramtion dialog");
158 |                         }
159 |                     });
160 |                 });
161 |                 $("#onlyBody").on("click", function (event) {
162 |                     var onlyBody = BootstrapModalWrapperFactory.createModal({
163 |                         message: "Simple Message body",
164 |                         closable: false,
165 |                         closeByBackdrop: true
166 |                     });
167 |                     onlyBody.show();
168 |                 });
169 |                 $("#onlyBodyWithHeader").on("click", function (event) {
170 |                     var modalWrapper = BootstrapModalWrapperFactory.createModal({
171 |                         message: "Simple Message body",
172 |                         title: "Header Title",
173 |                         closable: true,
174 |                         closeByBackdrop: true
175 |                     });
176 |                     modalWrapper.show();
177 |                 });
178 |                 $("#disableClose").on("click", function (event) {
179 |                     var modalWrapper = BootstrapModalWrapperFactory.createModal({
180 |                         message: "Simple Message body",
181 |                         title: "Header Title",
182 |                         closable: false,
183 |                         closeByBackdrop: true
184 |                     });
185 |                     modalWrapper.show();
186 |                 });
187 |                 $("#disableCloseBackdrop").on("click", function (event) {
188 |                     var modalWrapper = BootstrapModalWrapperFactory.createModal({
189 |                         message: "Simple Message body",
190 |                         title: "Header Title",
191 |                         closable: false,
192 |                         closeByBackdrop: false,
193 |                         buttons: [
194 |                             {
195 |                                 label: "Close Me",
196 |                                 cssClass: "btn btn-primary",
197 |                                 action: function (button, buttonData, originalEvent) {
198 |                                     return this.hide();
199 |                                 }
200 |                             }
201 |                         ]
202 |                     });
203 |                     modalWrapper.show();
204 |                 });
205 |                 $("#multiModal").on("click", function (event) {
206 |                     var modalWrapper = BootstrapModalWrapperFactory.createModal({
207 |                         message: "Simple Message body",
208 |                         title: "Header Title",
209 |                         closable: false,
210 |                         closeByBackdrop: false,
211 |                         buttons: [
212 |                             {
213 |                                 label: "Close",
214 |                                 cssClass: "btn btn-secondary",
215 |                                 action: function (button, buttonData, originalEvent) {
216 |                                     return this.hide();
217 |                                 }
218 |                             },
219 |                             {
220 |                                 label: "Create alert",
221 |                                 cssClass: "btn btn-primary",
222 |                                 action: function (button, buttonData, originalEvent) {
223 |                                     BootstrapModalWrapperFactory.alert("Alert Modal Created");
224 |                                 }
225 |                             }
226 |                         ]
227 |                     }).show();
228 |                 });
229 |                 $("#updateTitleContent").on("click", function (event) {
230 |                     BootstrapModalWrapperFactory.createModal({
231 |                         message: "Simple Message body",
232 |                         title: "Header Title",
233 |                         closable: false,
234 |                         closeByBackdrop: false,
235 |                         buttons: [
236 |                             {
237 |                                 label: "Close",
238 |                                 cssClass: "btn btn-secondary",
239 |                                 action: function (button, buttonData, originalEvent) {
240 |                                     return this.hide();
241 |                                 }
242 |                             },
243 |                             {
244 |                                 label: "Update Title & Message",
245 |                                 cssClass: "btn btn-primary",
246 |                                 action: function (button, buttonData, originalEvent) {
247 |                                     this.updateTitle("New Title");
248 |                                     this.updateMessage("Updated message content");
249 |                                 }
250 |                             }
251 |                         ]
252 |                     }).show();
253 |                 });
254 |                 $("#updateModalSize").on("click", function (event) {
255 |                     BootstrapModalWrapperFactory.createModal({
256 |                         message: "Simple Message body",
257 |                         title: "Header Title",
258 |                         closable: false,
259 |                         closeByBackdrop: false,
260 |                         buttons: [
261 |                             {
262 |                                 label: "Close",
263 |                                 cssClass: "btn btn-secondary",
264 |                                 action: function (button, buttonData, originalEvent) {
265 |                                     return this.hide();
266 |                                 }
267 |                             },
268 |                             {
269 |                                 label: "Make Me Extra Large",
270 |                                 cssClass: "btn btn-primary",
271 |                                 action: function (button, buttonData, originalEvent) {
272 |                                     this.originalModal.find(".modal-dialog").css({transition: 'all 0.4s'});
273 |                                     this.updateSize("modal-xl");
274 |                                 }
275 |                             },
276 |                             {
277 |                                 label: "Make Me Large",
278 |                                 cssClass: "btn btn-primary",
279 |                                 action: function (button, buttonData, originalEvent) {
280 |                                     this.originalModal.find(".modal-dialog").css({transition: 'all 0.4s'});
281 |                                     this.updateSize("modal-lg");
282 |                                 }
283 |                             },
284 |                             {
285 |                                 label: "Make Me Small",
286 |                                 cssClass: "btn btn-primary",
287 |                                 action: function (button, buttonData, originalEvent) {
288 |                                     this.originalModal.find(".modal-dialog").css({transition: 'all 0.4s'});
289 |                                     this.updateSize("modal-sm");
290 |                                 }
291 |                             },
292 |                             {
293 |                                 label: "Make Me Default",
294 |                                 cssClass: "btn btn-primary",
295 |                                 action: function (button, buttonData, originalEvent) {
296 |                                     this.originalModal.find(".modal-dialog").css({transition: 'all 0.4s'});
297 |                                     this.updateSize(null);
298 |                                 }
299 |                             }
300 |                         ]
301 |                     }).show();
302 |                 });
303 |                 $("#updateButtons").on("click", function (event) {
304 |                     var buttonsCount = 0;
305 |                     BootstrapModalWrapperFactory.createModal({
306 |                         message: "Simple Message body",
307 |                         title: "Header Title",
308 |                         closable: false,
309 |                         closeByBackdrop: false,
310 |                         buttons: [
311 |                             {
312 |                                 label: "Close",
313 |                                 cssClass: "btn btn-secondary",
314 |                                 action: function (button, buttonData, originalEvent) {
315 |                                     return this.hide();
316 |                                 }
317 |                             },
318 |                             {
319 |                                 label: "Add Button",
320 |                                 cssClass: "btn btn-primary",
321 |                                 action: function (button, buttonData, originalEvent) {
322 |                                     this.addButton({
323 |                                         id: "id-" + (++buttonsCount),
324 |                                         label: "New " + buttonsCount,
325 |                                         cssClass: "btn btn-secondary",
326 |                                         action: function (button, buttonData, originalEvent) {
327 |                                             BootstrapModalWrapperFactory.showMessage("nothing only to show attached event to button id [" + buttonData.id + "]");
328 |                                             return true;
329 |                                         }
330 |                                     });
331 |                                 }
332 |                             },
333 |                             {
334 |                                 label: "Delete Button",
335 |                                 cssClass: "btn btn-primary",
336 |                                 action: function (button, buttonData, originalEvent) {
337 |                                     this.removeButton("id-" + (buttonsCount--));
338 |                                 }
339 |                             }
340 |                         ]
341 |                     }).show();
342 |                 });
343 |                 $("#ajaxContent").on("click", function (event) {
344 |                     var m = BootstrapModalWrapperFactory.createModal({
345 |                         message: '<div class="text-center">Loading</div>',
346 |                         closable: false,
347 |                         closeByBackdrop: false
348 |                     });
349 |                     m.originalModal.find(".modal-dialog").css({transition: 'all 0.5s'});
350 |                     m.show();
351 |                     setTimeout(function () {
352 |                         m.updateSize("modal-lg");
353 |                         m.updateTitle("Message Received");
354 |                         m.updateMessage("Message Content");
355 |                         m.addButton({
356 |                             label: "Close",
357 |                             cssClass: "btn btn-secondary",
358 |                             action: function (button, buttonData, originalEvent) {
359 |                                 return this.hide();
360 |                             }
361 |                         });
362 |                     }, 2000);
363 |                 });
364 |                 $("#ajaxContentinSmallToXLargeModal").on("click", function (event) {
365 |                     var m = BootstrapModalWrapperFactory.createAjaxModal({
366 |                         message: '<div class="text-center">Loading</div>',
367 |                         closable: true,
368 |                         title: "AJAX Content",
369 |                         closeByBackdrop: false,
370 |                         sendId: true, // default is true which send the modal id as a url parameter.
371 |                         idParameter: "ajaxModalIdTestingName", // default name for url parameter containing id of the modal is "ajaxModalId"
372 |                         updateSizeAfterDataFetchTo: "modal-xl", // default is "modal-lg" or null for standard or "modal-sm"
373 |                         size: "modal-sm",
374 |                         ajax: {
375 |                             url: "blank-ajax-response.html"
376 |                         },
377 |                         localData: {
378 |                             para1: "any value 1",
379 |                             object1: {m: 1, n: 3},
380 |                             array1: [1, 2, 3, 4, 5],
381 |                             funRef: function () {
382 |                                 alert("running from the modal itself");
383 |                             }
384 |                         } // Javascript Object kept in the settings object and available from within modal functions by options.localData
385 |                     });
386 |                 });
387 |                 $("#ajaxContentinSmallModal").on("click", function (event) {
388 |                     var m = BootstrapModalWrapperFactory.createAjaxModal({
389 |                         message: '<div class="text-center">Loading</div>',
390 |                         closable: true,
391 |                         title: "AJAX Content",
392 |                         closeByBackdrop: false,
393 |                         sendId: true, // default is true which send the modal id as a url parameter.
394 |                         idParameter: "ajaxModalIdTestingName", // default name for url parameter containing id of the modal is "ajaxModalId"
395 |                         updateSizeAfterDataFetchTo: "modal-sm", // default is "modal-lg" or null for standard or "modal-sm"
396 |                         size: "modal-sm",
397 |                         ajax: {
398 |                             url: "blank-ajax-response.html"
399 |                         },
400 |                         localData: {
401 |                             para1: "any value 1",
402 |                             object1: {m: 1, n: 3},
403 |                             array1: [1, 2, 3, 4, 5],
404 |                             funRef: function () {
405 |                                 alert("running from the modal itself");
406 |                             }
407 |                         } // Javascript Object kept in the settings object and available from within modal functions by options.localData
408 |                     });
409 |                 });
410 |                 $("#ajaxContentinDefaultModal").on("click", function (event) {
411 |                     var m = BootstrapModalWrapperFactory.createAjaxModal({
412 |                         message: '<div class="text-center">Loading</div>',
413 |                         closable: true,
414 |                         title: "AJAX Content",
415 |                         closeByBackdrop: false,
416 |                         sendId: true, // default is true which send the modal id as a url parameter.
417 |                         idParameter: "ajaxModalIdTestingName", // default name for url parameter containing id of the modal is "ajaxModalId"
418 |                         updateSizeAfterDataFetchTo: null, // default is "modal-lg" or null for standard or "modal-sm"
419 |                         size: null,
420 |                         ajax: {
421 |                             url: "blank-ajax-response.html"
422 |                         },
423 |                         localData: {
424 |                             para1: "any value 1",
425 |                             object1: {m: 1, n: 3},
426 |                             array1: [1, 2, 3, 4, 5],
427 |                             funRef: function () {
428 |                                 alert("running from the modal itself");
429 |                             }
430 |                         } // Javascript Object kept in the settings object and available from within modal functions by options.localData
431 |                     });
432 |                 });
433 |                 $("#ajaxContentinLargeModal").on("click", function (event) {
434 |                     var m = BootstrapModalWrapperFactory.createAjaxModal({
435 |                         message: '<div class="text-center">Loading</div>',
436 |                         closable: true,
437 |                         title: "AJAX Content",
438 |                         closeByBackdrop: false,
439 |                         sendId: true, // default is true which send the modal id as a url parameter.
440 |                         idParameter: "ajaxModalIdTestingName", // default name for url parameter containing id of the modal is "ajaxModalId"
441 |                         updateSizeAfterDataFetchTo: "modal-lg", // default is  or null for standard or "modal-sm"
442 |                         size: "modal-lg",
443 |                         ajax: {
444 |                             url: "blank-ajax-response.html"
445 |                         },
446 |                         localData: {
447 |                             para1: "any value 1",
448 |                             object1: {m: 1, n: 3},
449 |                             array1: [1, 2, 3, 4, 5],
450 |                             funRef: function () {
451 |                                 alert("running from the modal itself");
452 |                             }
453 |                         } // Javascript Object kept in the settings object and available from within modal functions by options.localData
454 |                     });
455 |                 });
456 |                 $("#ajaxContentinXLargeModal").on("click", function (event) {
457 |                     var m = BootstrapModalWrapperFactory.createAjaxModal({
458 |                         message: '<div class="text-center">Loading</div>',
459 |                         closable: true,
460 |                         title: "AJAX Content",
461 |                         closeByBackdrop: false,
462 |                         sendId: true, // default is true which send the modal id as a url parameter.
463 |                         idParameter: "ajaxModalIdTestingName", // default name for url parameter containing id of the modal is "ajaxModalId"
464 |                         updateSizeAfterDataFetchTo: "modal-xl", // default is  or null for standard or "modal-sm"
465 |                         size: "modal-xl",
466 |                         ajax: {
467 |                             url: "blank-ajax-response.html"
468 |                         },
469 |                         localData: {
470 |                             para1: "any value 1",
471 |                             object1: {m: 1, n: 3},
472 |                             array1: [1, 2, 3, 4, 5],
473 |                             funRef: function () {
474 |                                 alert("running from the modal itself");
475 |                             }
476 |                         } // Javascript Object kept in the settings object and available from within modal functions by options.localData
477 |                     });
478 |                 });
479 |                 $("#logConsoleModal").on("click", function (event) {
480 |                     var modalWrapper = BootstrapModalWrapperFactory.createModal({
481 |                         message: "Simple Message body",
482 |                         title: "Header Title",
483 |                         closable: true,
484 |                         closeByBackdrop: true
485 |                     });
486 |                     modalWrapper.originalModal.find(".modal-header").addClass("bg-primary text-white");
487 |                     modalWrapper.originalModal.on('show.bs.modal', function (e) {
488 |                         // do something...
489 |                         console.log('show.bs.modal');
490 |                     }).on('shown.bs.modal', function (e) {
491 |                         // do something...
492 |                         console.log('shown.bs.modal');
493 |                     }).on('hide.bs.modal', function (e) {
494 |                         // do something...
495 |                         console.log('hide.bs.modal');
496 |                     }).on('hidden.bs.modal', function (e) {
497 |                         // do something...
498 |                         console.log('hidden.bs.modal');
499 |                     });
500 |                     modalWrapper.show();
501 |                 });
502 |                 $("#centeredBootModal").on("click", function (event) {
503 |                     var centeredBootModal = BootstrapModalWrapperFactory.createModal({
504 |                         message: "Simple Centered Bootstrap Message body",
505 |                         closable: false,
506 |                         closeByBackdrop: true,
507 |                         centered: true
508 |                     });
509 |                     centeredBootModal.show();
510 |                 });
511 | 
512 |                 $("#longBodyContent").on("click", function (event) {
513 |                     var longContent = "";
514 |                     for (var i = 0; i < 20; i++) {
515 |                         longContent += "<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>";
516 |                     }
517 |                     var dialog = BootstrapModalWrapperFactory.createModal({
518 |                         title: "Long Body Content",
519 |                         message: longContent,
520 |                         closable: false,
521 |                         closeByBackdrop: true,
522 |                         centered: true,
523 |                         buttons: [
524 |                             {
525 |                                 label: "Set Scrollable True",
526 |                                 cssClass: "btn btn-secondary",
527 |                                 action: function (button, buttonData, originalEvent) {
528 |                                     return this.updateModalDialogScrollable(true);
529 |                                 }
530 |                             },
531 |                             {
532 |                                 label: "Set Scrollable False",
533 |                                 cssClass: "btn btn-secondary",
534 |                                 action: function (button, buttonData, originalEvent) {
535 |                                     return this.updateModalDialogScrollable(false);
536 |                                 }
537 |                             },
538 |                             {
539 |                                 label: "Close",
540 |                                 cssClass: "btn btn-secondary",
541 |                                 action: function (button, buttonData, originalEvent) {
542 |                                     return this.hide();
543 |                                 }
544 |                             }
545 |                         ]
546 |                     });
547 |                     dialog.show();
548 |                 });
549 | 
550 |                 $("#h1ForTitle").on("click", function (event) {
551 |                     var dialog = BootstrapModalWrapperFactory.createModal({
552 |                         title: "Long Body Content",
553 |                         modalTitleContainer: "<h1 class='modal-title'></h1>",
554 |                         message: "modal dialog body content",
555 |                         closable: true,
556 |                         closeByBackdrop: true,
557 |                         centered: true,
558 |                         buttons: [
559 |                             {
560 |                                 label: "Close",
561 |                                 cssClass: "btn btn-secondary",
562 |                                 action: function (button, buttonData, originalEvent) {
563 |                                     return this.hide();
564 |                                 }
565 |                             }
566 |                         ]
567 |                     });
568 |                     dialog.show();
569 |                 });
570 | 
571 |                 $("#fullscreenfeatures").on("click", function (event) {
572 |                     var lineOfText = "<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>";
573 |                     var longContent = "";
574 |                     for (var i = 0; i < 2; i++) {
575 |                         longContent += lineOfText;
576 |                     }
577 |                     var dialog = BootstrapModalWrapperFactory.createModal({
578 |                         title: "Fullscreen Long Body Content",
579 |                         message: longContent,
580 |                         closable: false,
581 |                         closeByBackdrop: true,
582 |                         centered: true,
583 |                         modalDialogScrollable: false,
584 |                         buttons: [
585 |                             {
586 |                                 label: "Set Scrollable True",
587 |                                 cssClass: "btn btn-secondary",
588 |                                 action: function (button, buttonData, originalEvent) {
589 |                                     return this.updateModalDialogScrollable(true);
590 |                                 }
591 |                             },
592 |                             {
593 |                                 label: "Set Scrollable False",
594 |                                 cssClass: "btn btn-secondary",
595 |                                 action: function (button, buttonData, originalEvent) {
596 |                                     return this.updateModalDialogScrollable(false);
597 |                                 }
598 |                             },
599 |                             {
600 |                                 label: "Add More Content",
601 |                                 cssClass: "btn btn-secondary",
602 |                                 action: function (button, buttonData, originalEvent) {
603 |                                     var currentBody = $(dialog.originalModal).find(".modal-body").html();
604 |                                     for (var i = 0; i < 5; i++) {
605 |                                         currentBody += lineOfText;
606 |                                     }
607 |                                     $(dialog.originalModal).find(".modal-body").html(currentBody);
608 |                                 }
609 |                             },
610 |                             {
611 |                                 label: "Add Fullscreen",
612 |                                 cssClass: "btn btn-secondary",
613 |                                 action: function (button, buttonData, originalEvent) {
614 |                                     $(dialog.originalModal).addClass("bootstrap-modal-wrapper-fullscreen");
615 |                                 }
616 |                             },
617 |                             {
618 |                                 label: "Remove Fullscreen",
619 |                                 cssClass: "btn btn-secondary",
620 |                                 action: function (button, buttonData, originalEvent) {
621 |                                     $(dialog.originalModal).removeClass("bootstrap-modal-wrapper-fullscreen");
622 |                                 }
623 |                             },
624 |                             {
625 |                                 label: "Close",
626 |                                 cssClass: "btn btn-secondary",
627 |                                 action: function (button, buttonData, originalEvent) {
628 |                                     return this.hide();
629 |                                 }
630 |                             }
631 |                         ]
632 |                     });
633 |                     $(dialog.originalModal).addClass("bootstrap-modal-wrapper-fullscreen");
634 |                     dialog.show();
635 |                 });
636 |                 $("#customTemplateForButtons").on("click", function (event) {
637 |                     var lineOfText = "<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>";
638 |                     var longContent = "";
639 |                     for (var i = 0; i < 2; i++) {
640 |                         longContent += lineOfText;
641 |                     }
642 |                     var dialog = BootstrapModalWrapperFactory.createModal({
643 |                         title: "Fullscreen Long Body Content",
644 |                         message: longContent,
645 |                         closable: false,
646 |                         closeByBackdrop: true,
647 |                         centered: true,
648 |                         modalDialogScrollable: false,
649 |                         buttons: [
650 |                             {
651 |                                 template: "<a href='javascript:void(0)'></a>",
652 |                                 label: "Set Scrollable True",
653 |                                 cssClass: "btn btn-link",
654 |                                 action: function (button, buttonData, originalEvent) {
655 |                                     return this.updateModalDialogScrollable(true);
656 |                                 }
657 |                             },
658 |                             {
659 |                                 template: "<a href='javascript:void(0)'></a>",
660 |                                 label: "Set Scrollable False",
661 |                                 cssClass: "btn btn-link",
662 |                                 action: function (button, buttonData, originalEvent) {
663 |                                     return this.updateModalDialogScrollable(false);
664 |                                 }
665 |                             },
666 |                             {
667 |                                 template: "<a href='javascript:void(0)'></a>",
668 |                                 label: "Add More Content",
669 |                                 cssClass: "btn btn-link",
670 |                                 action: function (button, buttonData, originalEvent) {
671 |                                     var currentBody = $(dialog.originalModal).find(".modal-body").html();
672 |                                     for (var i = 0; i < 5; i++) {
673 |                                         currentBody += lineOfText;
674 |                                     }
675 |                                     $(dialog.originalModal).find(".modal-body").html(currentBody);
676 |                                 }
677 |                             },
678 |                             {
679 |                                 template: "<a href='javascript:void(0)'></a>",
680 |                                 label: "Add Fullscreen",
681 |                                 cssClass: "btn btn-link",
682 |                                 action: function (button, buttonData, originalEvent) {
683 |                                     $(dialog.originalModal).addClass("bootstrap-modal-wrapper-fullscreen");
684 |                                 }
685 |                             },
686 |                             {
687 |                                 template: "<a href='javascript:void(0)'></a>",
688 |                                 label: "Remove Fullscreen",
689 |                                 cssClass: "btn btn-link",
690 |                                 action: function (button, buttonData, originalEvent) {
691 |                                     $(dialog.originalModal).removeClass("bootstrap-modal-wrapper-fullscreen");
692 |                                 }
693 |                             },
694 |                             {
695 |                                 template: "<a href='javascript:void(0)'></a>",
696 |                                 label: "Close",
697 |                                 cssClass: "btn btn-link text-danger bg-light",
698 |                                 action: function (button, buttonData, originalEvent) {
699 |                                     return this.hide();
700 |                                 }
701 |                             }
702 |                         ]
703 |                     });
704 |                     dialog.show();
705 |                 });
706 |             });
707 |         </script>
708 |     </body>
709 | </html>
710 | 


--------------------------------------------------------------------------------
/dist/bootstrap-modal-wrapper-factory.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * bootstrap-modal-wrapper (http://javatmp.com)
 3 |  * Bootstrap modal wrapper plugin creates dynamic and nested stacked dialog instances
 4 |  *
 5 |  * @version 2.0.2
 6 |  * @link https://github.com/JavaTMP/bootstrap-modal-wrapper
 7 |  * @copyright 2018 JavaTMP
 8 |  * @license MIT
 9 |  */
10 | !function(o,t){"use strict";"undefined"!=typeof module&&module.exports?module.exports=t(require("jquery"),require("bootstrap")):"function"==typeof define&&define.amd?define("bootstrap-modal-wrapper-factory",["jquery","bootstrap"],function(o){return t(o)}):o.BootstrapModalWrapperFactory=t(o.jQuery)}(this,function(e){"use strict";var i={starterZIndex:1e4};function o(o){this.options=e.extend({},i,o),this.defaults=i,this.globalModals=[],this.registerGlobalEventsHandler()}o.prototype.createModal=function(o){var t=new l(this,o);return this.globalModals.push(t),t.init(),t},o.prototype.createAjaxModal=function(o){var a=e.extend(!0,{},{sendId:!0,idParameter:"ajaxModalId",updateSizeAfterDataFetchTo:"modal-lg",ajaxContainerReadyEventName:"ajax-container-ready",ajax:{type:"GET",dataType:"html",url:null,data:{},success:function(o,t,i){n.updateSize(a.updateSizeAfterDataFetchTo),n.updateMessage(o),setTimeout(function(){e("#"+n.options.id).trigger(a.ajaxContainerReadyEventName,[n])},0)}}},o),n=this.createModal(a);return n.options.sendId&&(n.options.ajax.data[n.options.idParameter]=n.options.id),n.originalModal.removeClass("fade"),n.originalModal.find(".modal-dialog").css({transition:"all .3s"}),n.originalModal.one("shown.bs.modal",function(o){e.ajax(n.options.ajax)}),n.show(),n};var a="<div class='modal-header'></div>",n="<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>";var s=function(o){return o+"-"+Math.floor(1e8*Math.random()+1)+"-"+(new Date).getTime()+"-"+function(){var o,t,i="";for(o=0;o<32;o++)t=16*Math.random()|0,8!==o&&12!==o&&16!==o&&20!==o||(i+="-"),i+=(12===o?4:16===o?3&t|8:t).toString(16);return i}()};function l(o,t){this.factory=o,this.options=e.extend(!0,{},{id:s("b-m-w"),title:null,message:null,closable:!1,closeByBackdrop:!0,closeByKeyboard:!0,size:null,onDestroy:null,buttons:[],headerClass:null,localData:{},centered:!1,modalDialogScrollable:!0,modalTitleContainer:"<h5 class='modal-title'></h5>",modalButtonContainer:"<button id='' type='button' class='my-1'></button>",modalFooterContainer:"<div class='modal-footer d-flex flex-wrap'></div>"},t),this.originalModal=null,this.isDestroy=!1,this.isOpen=!1}return l.prototype.generateTemplate=function(){this.originalModal=e("<div class='modal fade' id='' tabindex='-1' role='dialog' aria-labelledby='' aria-hidden='true'><div class='modal-dialog' role='document'><div class='modal-content'></div></div></div>"),this.originalModal.attr("id",this.options.id);var o=this.originalModal.find(".modal-dialog");if(!this.options.size||"modal-sm"!==this.options.size&&"modal-lg"!==this.options.size&&"modal-xl"!==this.options.size||o.addClass(this.options.size),!0===this.options.centered&&o.addClass("modal-dialog-centered"),!0===this.options.modalDialogScrollable&&o.addClass("modal-dialog-scrollable"),(this.options.title||this.options.closable)&&this.originalModal.find(".modal-content").append(a),this.options.title&&this.originalModal.find(".modal-header").append(this.options.modalTitleContainer).find(".modal-title").append(this.options.title),this.options.closable&&this.originalModal.find(".modal-header").append(n),this.options.headerClass&&this.originalModal.find(".modal-header").addClass(this.options.headerClass),this.options.message&&(this.originalModal.find(".modal-content").append("<div class='modal-body'></div>"),this.originalModal.find(".modal-body").html("").append(this.options.message)),this.options.buttons&&0<this.options.buttons.length){this.originalModal.find(".modal-content").append(this.options.modalFooterContainer);for(var t=0;t<this.options.buttons.length;t++){var i=this.options.buttons[t];this.addButton(i,!1)}}},l.prototype.init=function(){this.generateTemplate();var i=this;this.originalModal.on("show.bs.modal",function(o){o.stopPropagation();var t=i.factory.defaults.starterZIndex+10*e(".modal.show").length;e(this).css("z-index",t),setTimeout(function(){e(".modal-backdrop").not(".modal-stack").first().css("z-index",t-1).addClass("modal-stack")},0)}).on("shown.bs.modal",function(o){i.isOpen=!0}).on("hide.bs.modal",function(o){i.options.onDestroy&&"function"==typeof i.options.onDestroy&&(i.options.onDestroy.call(i,i)||o.preventDefault())}).on("hidden.bs.modal",function(o){o.stopPropagation(),i.destroy(),e(".modal.show").length&&e("body").addClass("modal-open")})},l.prototype.destroy=function(){var t=this;this.originalModal.modal("hide").promise().done(function(){t.isOpen=!1,e("#"+t.options.id).off("show.bs.modal"),e("#"+t.options.id).off("hidden.bs.modal"),e("#"+t.options.id).modal("dispose");for(var o=0;o<t.options.buttons.length;o++){t.options.buttons[o].buttonObject.off()}t.isDestroy=!0;for(o=t.factory.globalModals.length;o--;)if(t.factory.globalModals[o].options.id===t.options.id){t.factory.globalModals.splice(o,1);break}e("#"+t.options.id).find(".modal-dialog").off(),e("#"+t.options.id).off(),e("#"+t.options.id).remove()})},l.prototype.show=function(){var o={show:!0,backdrop:!!this.options.closeByBackdrop||"static",keyboard:this.options.closeByKeyboard,focus:!0};return this.originalModal.modal(o),this},l.prototype.hide=function(){this.originalModal.modal("hide")},l.prototype.updateTitle=function(o){this.options.title=o;var t=this.originalModal.find(".modal-title");if(0===t.length){var i=this.originalModal.find(".modal-header");0===i.length&&(this.originalModal.find(".modal-content").prepend(a),i=this.originalModal.find(".modal-header")),i.prepend(this.options.modalTitleContainer),t=this.originalModal.find(".modal-title")}return t.html(o),this.originalModal.modal("handleUpdate"),this},l.prototype.updateClosable=function(o){if(this.options.closable!==o){if(this.options.closable=o,!0===this.options.closable){var t=this.originalModal.find(".modal-header");0===t.length&&(this.originalModal.find(".modal-content").prepend(a),t=this.originalModal.find(".modal-header")),t.append(n)}else if(!1===this.options.closable){var i=this.originalModal.find(".modal-header").find("button.close");i.off(),i.remove(),0===this.originalModal.find(".modal-header").find(".modal-title").length&&this.originalModal.find(".modal-header").remove()}this.originalModal.modal("handleUpdate")}return this},l.prototype.updateClosableByBackdrop=function(o){return this.options.closeByBackdrop!==o&&(this.options.closeByBackdrop=o,e("#"+this.options.id).data("bs.modal")._config.backdrop=!!this.options.closeByBackdrop||"static",this.originalModal.modal("handleUpdate")),this},l.prototype.removeHeader=function(){var o=this.originalModal.find(".modal-header");if(0<o.length){var t=o.find("button.close");0<t.length&&(t.off(),t.remove(),this.options.closable=!1),o.remove(),this.options.title=null}return this.originalModal.modal("handleUpdate"),this},l.prototype.updateMessage=function(o){return this.options.message=o,this.originalModal.find(".modal-body").html("").html(o),this.originalModal.modal("handleUpdate"),this},l.prototype.updateSize=function(o){return this.options.size!==o&&(this.options.size=o,this.options.size&&void 0!==this.options.size&&null!==this.options.size?"modal-sm"!==this.options.size&&"modal-lg"!==this.options.size&&"modal-xl"!==this.options.size||(this.originalModal.find(".modal-dialog").removeClass("modal-xl modal-lg modal-sm"),this.originalModal.find(".modal-dialog").addClass(this.options.size)):this.originalModal.find(".modal-dialog").removeClass("modal-xl modal-lg modal-sm"),this.originalModal.modal("handleUpdate")),this},l.prototype.updateModalDialogScrollable=function(o){if(this.options.modalDialogScrollable!==o){this.options.modalDialogScrollable=o;var t=this.originalModal.find(".modal-dialog");!0===this.options.modalDialogScrollable?t.addClass("modal-dialog-scrollable"):!1===this.options.modalDialogScrollable&&t.removeClass("modal-dialog-scrollable"),this.originalModal.modal("handleUpdate")}return this},l.prototype.disableButtons=function(){this.originalModal.find(".modal-footer").find("button").prop("disabled",!0)},l.prototype.enableButtons=function(){this.originalModal.find(".modal-footer").find("button").prop("disabled",!1)},l.prototype.addButton=function(o,t){var i=this.originalModal.find(".modal-footer");0===i.length&&(this.originalModal.find(".modal-content").append(this.options.modalFooterContainer),i=this.originalModal.find(".modal-footer")),o.id=o.id?o.id:s("modal-button");var a=o.template?o.template:this.options.modalButtonContainer,n=e(a);return n.attr("id",o.id),n.addClass(o.cssClass?o.cssClass:""),n.append(o.label),(o.buttonObject=n).on("click",{modalWrapper:this,button:n,buttonData:o},function(o){var t=o.data.modalWrapper,i=o.data.button,a=o.data.buttonData;if(a.action&&"function"==typeof a.action)return a.action.call(t,i,a,o)}),!1!==t&&this.options.buttons.push(o),n.appendTo(i)},l.prototype.setOnDestroy=function(o){this.options.onDestroy=o},l.prototype.removeButton=function(o){for(var t=null,i=this.options.buttons.length;i--;){if(this.options.buttons[i].id===o)(t=this.options.buttons[i]).buttonObject.off(),t.buttonObject.remove(),this.options.buttons.splice(i,1)}return this},o.prototype.showMessage=function(o){var t=null;return t="object"==typeof o&&o.constructor==={}.constructor?e.extend(!0,i,o):e.extend(!0,i,{message:o}),this.createModal(t).show()},o.prototype.alert=function(o){var t={title:"Alert",message:"",closable:!0,closeByBackdrop:!0,closeByKeyboard:!0,buttons:[{label:"OK",cssClass:"btn btn-primary",action:function(o,t,i){this.hide()}}]},i=null;return i="object"==typeof o&&o.constructor==={}.constructor?e.extend(!0,t,o):e.extend(!0,t,{message:o}),this.createModal(i).show()},o.prototype.confirm=function(a){var o={title:"Confirm",message:"Are You Sure ?",closable:!1,closeByBackdrop:!1,closeByKeyboard:!1,buttons:[{label:"No",cssClass:"btn btn-secondary",action:function(o,t,i){this.hide(),a.onConfirmCancel&&"function"==typeof a.onConfirmCancel&&a.onConfirmCancel()}},{label:"Yes",cssClass:"btn btn-primary",action:function(o,t,i){this.hide(),a.onConfirmAccept&&"function"==typeof a.onConfirmAccept&&a.onConfirmAccept()}}]},t=e.extend({},o,a);return this.createModal(t).show()},o.prototype.registerGlobalEventsHandler=function(){var a=this;e(document).on("show.bs.modal",".modal",function(o){var t=a.options.starterZIndex+10*e(".modal.show").length;e(this).css("z-index",t),setTimeout(function(){e(".modal-backdrop").not(".modal-stack").first().css("z-index",t-1).addClass("modal-stack")},0)}).on("hidden.bs.modal",".modal",function(o){e(".modal.show").length&&e("body").addClass("modal-open")}).on("inserted.bs.tooltip",function(o){var t=a.options.starterZIndex+10*e(".modal.show").length,i=e(o.target).attr("aria-describedby");e("#"+i).css("z-index",t)}).on("inserted.bs.popover",function(o){var t=a.options.starterZIndex+10*e(".modal.show").length,i=e(o.target).attr("aria-describedby");e("#"+i).css("z-index",t)})},new o});


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * bootstrap-modal-wrapper v1.0.0 (http://javatmp.com)
 3 |  * Bootstrap modal wrapper factory for creating dynamic and nested stacked dialog instances.
 4 |  * Copyright 2018 JavaTMP
 5 |  * Licensed under MIT (https://github.com/JavaTMP/bootstrap-modal-wrapper/blob/master/LICENSE)
 6 |  */
 7 | 
 8 | var gulp = require('gulp');
 9 | var rename = require('gulp-rename');
10 | var uglify = require('gulp-uglify');
11 | var del = require('del');
12 | var eslint = require('gulp-eslint');
13 | var header = require('gulp-header');
14 | var pkg = require('./package.json');
15 | 
16 | var banner = ['/*!',
17 |     ' * <%= pkg.name %> (http://javatmp.com)',
18 |     ' * <%= pkg.description %>',
19 |     ' *',
20 |     ' * @version <%= pkg.version %>',
21 |     ' * @link <%= pkg.homepage %>',
22 |     ' * @copyright 2018 JavaTMP',
23 |     ' * @license <%= pkg.license %>',
24 |     ' */',
25 |     ''].join('\n');
26 | 
27 | gulp.task('clean', function (cb) {
28 |     return del.sync(['./dist'], cb());
29 | });
30 | 
31 | gulp.task('dist', gulp.series("clean", function (cb) {
32 |     return gulp.src('./js/bootstrap-modal-wrapper-factory.js')
33 |             .pipe(eslint({
34 |                 "env": {"browser": true, "node": true, "jquery": true},
35 |                 "rules": {
36 |                     "semi": 2,
37 |                     "eqeqeq": 1,
38 |                     "quotes": 0,
39 |                     "no-trailing-spaces": 1,
40 |                     "eol-last": 1,
41 |                     "no-unused-vars": 0,
42 |                     "no-underscore-dangle": 0,
43 |                     "no-alert": 1,
44 |                     "no-lone-blocks": 1
45 |                 },
46 |                 "globals": ["jQuery", "$"]
47 |             }))
48 |             .pipe(eslint.format())
49 |             .pipe(uglify({output: {comments: /^!/}}))
50 |             .pipe(header(banner, {pkg: pkg}))
51 |             .pipe(rename({suffix: '.min'}))
52 |             .pipe(gulp.dest('./dist/'))
53 |             .on('end', function () {
54 |                 cb();
55 |             });
56 | }));
57 | 
58 | gulp.task('default', gulp.series("dist", function (cb) {
59 |     // place code for your default task here
60 |     cb();
61 | }));
62 | 


--------------------------------------------------------------------------------
/js/bootstrap-modal-wrapper-factory.js:
--------------------------------------------------------------------------------
  1 | (function (root, factory) {
  2 |     "use strict";
  3 |     // CommonJS module is defined
  4 |     if (typeof module !== "undefined" && module.exports) {
  5 |         module.exports = factory(require("jquery"), require("bootstrap"));
  6 |     }
  7 | // AMD module is defined
  8 |     else if (typeof define === "function" && define.amd) {
  9 |         define("bootstrap-modal-wrapper-factory", ["jquery", "bootstrap"], function ($) {
 10 |             return factory($);
 11 |         });
 12 |     } else {
 13 | // planted over the root!
 14 |         root.BootstrapModalWrapperFactory = factory(root.jQuery);
 15 |     }
 16 | 
 17 | }(this, function ($) {
 18 |     "use strict";
 19 | 
 20 |     var defaults = {
 21 |         starterZIndex: 10000
 22 |     };
 23 | 
 24 | // The actual plugin constructor
 25 |     function ModalWrapperFactory(options) {
 26 |         this.options = $.extend({}, defaults, options);
 27 |         this.defaults = defaults;
 28 |         this.globalModals = [];
 29 |         this.registerGlobalEventsHandler();
 30 |     }
 31 | 
 32 |     ModalWrapperFactory.prototype.createModal = function (options) {
 33 |         var newModalWrapper = new ModalWrapper(this, options);
 34 |         this.globalModals.push(newModalWrapper);
 35 |         newModalWrapper.init();
 36 |         return newModalWrapper;
 37 |     };
 38 | 
 39 |     ModalWrapperFactory.prototype.createAjaxModal = function (options) {
 40 |         var $this = this;
 41 |         var settings = $.extend(true, {}, {
 42 |             sendId: true,
 43 |             idParameter: "ajaxModalId",
 44 |             updateSizeAfterDataFetchTo: "modal-lg",
 45 |             ajaxContainerReadyEventName: "ajax-container-ready",
 46 |             ajax: {
 47 |                 type: "GET",
 48 |                 dataType: "html",
 49 |                 url: null,
 50 |                 data: {},
 51 |                 success: function (response, textStatus, jqXHR) {
 52 |                     ajaxModalContainer.updateSize(settings.updateSizeAfterDataFetchTo);
 53 |                     ajaxModalContainer.updateMessage(response);
 54 |                     setTimeout(function () {
 55 |                         $("#" + ajaxModalContainer.options.id).trigger(settings.ajaxContainerReadyEventName, [ajaxModalContainer]);
 56 |                     }, 0);
 57 |                 }
 58 |             }
 59 |         }, options);
 60 |         var ajaxModalContainer = $this.createModal(settings);
 61 |         if (ajaxModalContainer.options.sendId) {
 62 |             ajaxModalContainer.options.ajax.data[ajaxModalContainer.options.idParameter] = ajaxModalContainer.options.id;
 63 |         }
 64 | 
 65 |         ajaxModalContainer.originalModal.removeClass("fade");
 66 |         ajaxModalContainer.originalModal.find(".modal-dialog").css({transition: 'all .3s'});
 67 |         // make sure the dialog is shown before calling AJAX request
 68 |         ajaxModalContainer.originalModal.one('shown.bs.modal', function (e) {
 69 |             $.ajax(ajaxModalContainer.options.ajax);
 70 |         });
 71 |         ajaxModalContainer.show();
 72 | 
 73 |         return ajaxModalContainer;
 74 |     };
 75 | 
 76 |     var modalTemplateContainer =
 77 |             "<div class='modal fade' id='' tabindex='-1' role='dialog' aria-labelledby='' aria-hidden='true'>" +
 78 |             "<div class='modal-dialog' role='document'>" +
 79 |             "<div class='modal-content'>" +
 80 |             "</div>" +
 81 |             "</div>" +
 82 |             "</div>";
 83 |     var modalHeaderContainer = "<div class='modal-header'></div>";
 84 |     var modalHeaderClosableContainer =
 85 |             "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
 86 |             "<span aria-hidden='true'>&times;</span>" +
 87 |             "</button>";
 88 |     var modalBodyContainer = "<div class='modal-body'></div>";
 89 | 
 90 |     function uuid() {
 91 |         var uuid = "", i, random;
 92 |         for (i = 0; i < 32; i++) {
 93 |             random = Math.random() * 16 | 0;
 94 |             if (i === 8 || i === 12 || i === 16 || i === 20) {
 95 |                 uuid += "-";
 96 |             }
 97 |             uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);
 98 |         }
 99 |         return uuid;
100 |     }
101 |     var getUniqueID = function (prefix) {
102 |         return prefix + "-" + Math.floor((Math.random() * 100000000) + 1) + "-" + new Date().getTime() + "-" + uuid();
103 |     };
104 |     function ModalWrapper(factory, options) {
105 |         this.factory = factory;
106 |         this.options = $.extend(true, {}, {
107 |             id: getUniqueID("b-m-w"),
108 |             title: null,
109 |             message: null,
110 |             closable: false,
111 |             closeByBackdrop: true,
112 |             closeByKeyboard: true,
113 |             size: null,
114 |             onDestroy: null,
115 |             buttons: [],
116 |             headerClass: null,
117 |             localData: {},
118 |             centered: false,
119 |             modalDialogScrollable: true,
120 |             modalTitleContainer: "<h5 class='modal-title'></h5>",
121 |             modalButtonContainer: "<button id='' type='button' class='my-1'></button>",
122 |             modalFooterContainer: "<div class='modal-footer d-flex flex-wrap'></div>"
123 |         }, options);
124 | 
125 | //        $.extend(true, this.options.localData, options.localData);
126 | 
127 |         this.originalModal = null;
128 |         this.isDestroy = false;
129 |         this.isOpen = false;
130 |     }
131 | 
132 |     ModalWrapper.prototype.generateTemplate = function () {
133 | 
134 |         this.originalModal = $(modalTemplateContainer);
135 | 
136 |         this.originalModal.attr("id", this.options.id);
137 |         var $dialog = this.originalModal.find(".modal-dialog");
138 |         if (this.options.size && (this.options.size === "modal-sm" || this.options.size === "modal-lg" || this.options.size === "modal-xl")) {
139 |             $dialog.addClass(this.options.size);
140 |         }
141 |         if (this.options.centered === true) {
142 |             $dialog.addClass('modal-dialog-centered');
143 |         }
144 |         if (this.options.modalDialogScrollable === true) {
145 |             $dialog.addClass('modal-dialog-scrollable');
146 |         }
147 | 
148 |         if (this.options.title || this.options.closable) {
149 |             this.originalModal.find(".modal-content").append(modalHeaderContainer);
150 |         }
151 |         if (this.options.title) {
152 |             this.originalModal.find(".modal-header").append(this.options.modalTitleContainer).find(".modal-title").append(this.options.title);
153 |         }
154 |         if (this.options.closable) {
155 |             this.originalModal.find(".modal-header").append(modalHeaderClosableContainer);
156 |         }
157 | 
158 |         if (this.options.headerClass) {
159 |             this.originalModal.find(".modal-header").addClass(this.options.headerClass);
160 |         }
161 | 
162 |         if (this.options.message) {
163 |             this.originalModal.find(".modal-content").append(modalBodyContainer);
164 |             this.originalModal.find(".modal-body").html('').append(this.options.message);
165 |         }
166 |         if (this.options.buttons && this.options.buttons.length > 0) {
167 |             this.originalModal.find(".modal-content").append(this.options.modalFooterContainer);
168 |             for (var i = 0; i < this.options.buttons.length; i++) {
169 |                 var buttonData = this.options.buttons[i];
170 |                 this.addButton(buttonData, false);
171 |             }
172 |         }
173 |     };
174 |     ModalWrapper.prototype.init = function () {
175 |         this.generateTemplate();
176 |         var $this = this;
177 |         this.originalModal.on("show.bs.modal", function (event) {
178 |             // YOU SHOULD STOP PROPAGATION because we register too for global modals.
179 |             event.stopPropagation();
180 |             var zIndex = $this.factory.defaults.starterZIndex + (10 * $(".modal.show").length);
181 |             $(this).css("z-index", zIndex);
182 |             setTimeout(function () {
183 |                 $(".modal-backdrop").not(".modal-stack").first().css("z-index", zIndex - 1).addClass("modal-stack");
184 |             }, 0);
185 |         }).on("shown.bs.modal", function (event) {
186 |             $this.isOpen = true;
187 |         }).on("hide.bs.modal", function (event) {
188 |             if ($this.options.onDestroy && (typeof $this.options.onDestroy === "function")) {
189 |                 if (!$this.options.onDestroy.call($this, $this)) {
190 |                     event.preventDefault();
191 |                 }
192 |             }
193 |         }).on("hidden.bs.modal", function (event) {
194 |             // YOU SHOULD STOP PROPAGATION because we register too for global modals.
195 |             event.stopPropagation();
196 |             $this.destroy();
197 |             $(".modal.show").length && $("body").addClass("modal-open");
198 |         });
199 |     };
200 |     ModalWrapper.prototype.destroy = function () {
201 |         var $this = this;
202 |         this.originalModal.modal("hide").promise().done(function () {
203 |             $this.isOpen = false;
204 |             $("#" + $this.options.id).off("show.bs.modal");
205 |             $("#" + $this.options.id).off("hidden.bs.modal");
206 |             $("#" + $this.options.id).modal("dispose");
207 |             for (var i = 0; i < $this.options.buttons.length; i++) {
208 |                 var button = $this.options.buttons[i];
209 |                 button.buttonObject.off();
210 |             }
211 | 
212 |             $this.isDestroy = true;
213 |             var i = $this.factory.globalModals.length;
214 |             while (i--) {
215 |                 if ($this.factory.globalModals[i].options.id === $this.options.id) {
216 |                     $this.factory.globalModals.splice(i, 1);
217 |                     break;
218 |                 }
219 |             }
220 |             $("#" + $this.options.id).find(".modal-dialog").off();
221 |             $("#" + $this.options.id).off();
222 |             $("#" + $this.options.id).remove();
223 |         });
224 |     };
225 | 
226 |     ModalWrapper.prototype.show = function () {
227 |         var currentOptions = {
228 |             show: true,
229 |             backdrop: this.options.closeByBackdrop ? true : "static",
230 |             keyboard: this.options.closeByKeyboard,
231 |             focus: true
232 |         };
233 |         this.originalModal.modal(currentOptions);
234 |         return this;
235 |     };
236 |     ModalWrapper.prototype.hide = function () {
237 |         this.originalModal.modal("hide");
238 |     };
239 | 
240 |     ModalWrapper.prototype.updateTitle = function (newTitle) {
241 |         this.options.title = newTitle;
242 |         var titleElement = this.originalModal.find(".modal-title");
243 |         if (titleElement.length === 0) {
244 |             var headerElement = this.originalModal.find(".modal-header");
245 |             if (headerElement.length === 0) {
246 |                 this.originalModal.find(".modal-content").prepend(modalHeaderContainer);
247 |                 headerElement = this.originalModal.find(".modal-header");
248 |             }
249 |             headerElement.prepend(this.options.modalTitleContainer);
250 |             titleElement = this.originalModal.find(".modal-title");
251 |         }
252 |         titleElement.html(newTitle);
253 |         this.originalModal.modal("handleUpdate");
254 |         return this;
255 |     };
256 |     ModalWrapper.prototype.updateClosable = function (newClosable) {
257 |         if (this.options.closable !== newClosable) {
258 |             this.options.closable = newClosable;
259 |             // if closable is true , we should show the x button on top right.
260 |             // else we should remove button and check if title exist or not if exist
261 |             // then we do nothing but if not exist we remove header to.
262 |             if (this.options.closable === true) {
263 |                 var headerElement = this.originalModal.find(".modal-header");
264 |                 if (headerElement.length === 0) {
265 |                     this.originalModal.find(".modal-content").prepend(modalHeaderContainer);
266 |                     headerElement = this.originalModal.find(".modal-header");
267 |                 }
268 |                 headerElement.append(modalHeaderClosableContainer);
269 |             } else if (this.options.closable === false) {
270 |                 var closableElement = this.originalModal.find(".modal-header").find("button.close");
271 |                 closableElement.off();
272 |                 closableElement.remove();
273 |                 var modalTitleElement = this.originalModal.find(".modal-header").find(".modal-title");
274 |                 if (modalTitleElement.length === 0) {
275 |                     this.originalModal.find(".modal-header").remove();
276 |                 }
277 | 
278 |             }
279 |             this.originalModal.modal("handleUpdate");
280 |         }
281 |         return this;
282 |     };
283 |     ModalWrapper.prototype.updateClosableByBackdrop = function (newClosableByBackdropValue) {
284 |         if (this.options.closeByBackdrop !== newClosableByBackdropValue) {
285 |             this.options.closeByBackdrop = newClosableByBackdropValue;
286 |             $("#" + this.options.id).data('bs.modal')._config.backdrop = this.options.closeByBackdrop ? true : "static";
287 |             this.originalModal.modal("handleUpdate");
288 |         }
289 |         return this;
290 |     };
291 |     ModalWrapper.prototype.removeHeader = function () {
292 |         var headerElement = this.originalModal.find(".modal-header");
293 |         if (headerElement.length > 0) {
294 |             var closeButton = headerElement.find("button.close");
295 |             if (closeButton.length > 0) {
296 |                 closeButton.off();
297 |                 closeButton.remove();
298 |                 this.options.closable = false;
299 |             }
300 |             headerElement.remove();
301 |             this.options.title = null;
302 |         }
303 |         this.originalModal.modal("handleUpdate");
304 |         return this;
305 |     };
306 |     ModalWrapper.prototype.updateMessage = function (newMessage) {
307 |         this.options.message = newMessage;
308 |         var bodyElement = this.originalModal.find(".modal-body");
309 |         bodyElement.html("").html(newMessage);
310 |         this.originalModal.modal("handleUpdate");
311 |         return this;
312 |     };
313 |     ModalWrapper.prototype.updateSize = function (newSize) {
314 |         if (this.options.size !== newSize) {
315 |             this.options.size = newSize;
316 |             if (!this.options.size || (typeof this.options.size === "undefined") || this.options.size === null) {
317 |                 this.originalModal.find(".modal-dialog").removeClass("modal-xl modal-lg modal-sm");
318 |             } else if (this.options.size === "modal-sm" || this.options.size === "modal-lg" || this.options.size === "modal-xl") {
319 |                 this.originalModal.find(".modal-dialog").removeClass("modal-xl modal-lg modal-sm");
320 |                 this.originalModal.find(".modal-dialog").addClass(this.options.size);
321 |             }
322 |             this.originalModal.modal("handleUpdate");
323 |         }
324 |         return this;
325 |     };
326 |     ModalWrapper.prototype.updateModalDialogScrollable = function (modalDialogScrollable) {
327 |         if (this.options.modalDialogScrollable !== modalDialogScrollable) {
328 |             this.options.modalDialogScrollable = modalDialogScrollable;
329 |             var modalDialog = this.originalModal.find(".modal-dialog");
330 |             if (this.options.modalDialogScrollable === true) {
331 |                 modalDialog.addClass("modal-dialog-scrollable");
332 |             } else if (this.options.modalDialogScrollable === false) {
333 |                 modalDialog.removeClass("modal-dialog-scrollable");
334 |             }
335 |             this.originalModal.modal("handleUpdate");
336 |         }
337 |         return this;
338 |     };
339 |     ModalWrapper.prototype.disableButtons = function () {
340 |         var footerElement = this.originalModal.find(".modal-footer");
341 |         footerElement.find('button').prop('disabled', true);
342 |     };
343 |     ModalWrapper.prototype.enableButtons = function () {
344 |         var footerElement = this.originalModal.find(".modal-footer");
345 |         footerElement.find('button').prop('disabled', false);
346 |     };
347 |     ModalWrapper.prototype.addButton = function (buttonData, updateOptions) {
348 |         var modalWrapperInstance = this;
349 |         var footerElement = this.originalModal.find(".modal-footer");
350 |         if (footerElement.length === 0) {
351 |             this.originalModal.find(".modal-content").append(this.options.modalFooterContainer);
352 |             footerElement = this.originalModal.find(".modal-footer");
353 |         }
354 |         buttonData.id = buttonData.id ? buttonData.id : getUniqueID("modal-button");
355 |         var buttonHtml = buttonData.template ? buttonData.template : modalWrapperInstance.options.modalButtonContainer;
356 |         var button = $(buttonHtml);
357 |         button.attr("id", buttonData.id);
358 |         button.addClass(buttonData.cssClass ? buttonData.cssClass : "");
359 |         button.append(buttonData.label);
360 |         buttonData.buttonObject = button;
361 |         button.on("click", {modalWrapper: modalWrapperInstance, button: button, buttonData: buttonData}, function (event) {
362 |             var modalWrapper = event.data.modalWrapper;
363 |             var button = event.data.button;
364 |             var buttonData = event.data.buttonData;
365 |             if (buttonData.action && (typeof buttonData.action === "function")) {
366 |                 return buttonData.action.call(modalWrapper, button, buttonData, event);
367 |             }
368 |         });
369 |         if (updateOptions !== false) {
370 |             this.options.buttons.push(buttonData);
371 |         }
372 | 
373 |         return button.appendTo(footerElement);
374 |     };
375 | 
376 |     ModalWrapper.prototype.setOnDestroy = function (onDestroyFunc) {
377 | //        if (onDestroyFunc && (typeof onDestroyFunc === "function")) {
378 | //            this.options.onDestroy = onDestroyFunc;
379 | //        }
380 |         this.options.onDestroy = onDestroyFunc;
381 |     };
382 |     ModalWrapper.prototype.removeButton = function (buttonId) {
383 | //        var modalWrapperInstance = this;
384 |         // check if the button id exist
385 |         var requestedButton = null;
386 |         var i = this.options.buttons.length;
387 |         while (i--) {
388 |             if (this.options.buttons[i].id === buttonId) {
389 |                 var requestedButton = this.options.buttons[i];
390 |                 requestedButton.buttonObject.off();
391 |                 requestedButton.buttonObject.remove();
392 |                 this.options.buttons.splice(i, 1);
393 |             }
394 |         }
395 |         return this;
396 |     };
397 | 
398 |     ModalWrapperFactory.prototype.showMessage = function (options) {
399 |         var showOptions = null;
400 |         if (typeof options === "object" && options.constructor === {}.constructor) {
401 |             showOptions = $.extend(true, defaults, options);
402 |         } else {
403 |             showOptions = $.extend(true, defaults, {message: options});
404 |         }
405 | 
406 |         return this.createModal(showOptions).show();
407 |     };
408 |     ModalWrapperFactory.prototype.alert = function (options) {
409 |         var defaults = {
410 |             title: "Alert",
411 |             message: "",
412 |             closable: true,
413 |             closeByBackdrop: true,
414 |             closeByKeyboard: true,
415 |             buttons: [
416 |                 {
417 |                     label: "OK",
418 |                     cssClass: "btn btn-primary",
419 |                     action: function (button, buttonData, originalEvent) {
420 |                         this.hide();
421 |                     }
422 |                 }
423 |             ]
424 |         };
425 |         var alertOptions = null;
426 |         if (typeof options === "object" && options.constructor === {}.constructor) {
427 |             alertOptions = $.extend(true, defaults, options);
428 |         } else {
429 |             alertOptions = $.extend(true, defaults, {message: options});
430 |         }
431 |         return this.createModal(alertOptions).show();
432 |     };
433 |     ModalWrapperFactory.prototype.confirm = function (options) {
434 |         var defaults = {
435 |             title: "Confirm",
436 |             message: "Are You Sure ?",
437 |             closable: false,
438 |             closeByBackdrop: false,
439 |             closeByKeyboard: false,
440 |             buttons: [
441 |                 {
442 |                     label: "No",
443 |                     cssClass: "btn btn-secondary",
444 |                     action: function (button, buttonData, originalEvent) {
445 |                         this.hide();
446 |                         if (options.onConfirmCancel && (typeof options.onConfirmCancel === "function")) {
447 |                             options.onConfirmCancel();
448 |                         }
449 |                     }
450 |                 },
451 |                 {
452 |                     label: "Yes",
453 |                     cssClass: "btn btn-primary",
454 |                     action: function (button, buttonData, originalEvent) {
455 |                         this.hide();
456 |                         if (options.onConfirmAccept && (typeof options.onConfirmAccept === "function")) {
457 |                             options.onConfirmAccept();
458 |                         }
459 |                     }
460 |                 }
461 |             ]
462 |         };
463 |         var confirmOptions = $.extend({}, defaults, options);
464 |         return this.createModal(confirmOptions).show();
465 |     };
466 | 
467 |     ModalWrapperFactory.prototype.registerGlobalEventsHandler = function () {
468 |         // some bootstrap plugins like summernote have problem when run inside a bootstrap modals
469 |         // as native bootstrap modal does support nested modal so we should handle the z-index of those plugins' modals
470 |         // too in the same way we handle the modal wrapper instaces
471 |         var $this = this;
472 |         $(document).on("show.bs.modal", '.modal', function (event) {
473 |             var zIndex = $this.options.starterZIndex + (10 * $(".modal.show").length);
474 |             $(this).css("z-index", zIndex);
475 |             setTimeout(function () {
476 |                 $(".modal-backdrop").not(".modal-stack").first().css("z-index", zIndex - 1).addClass("modal-stack");
477 |             }, 0);
478 |         }).on("hidden.bs.modal", '.modal', function (event) {
479 |             $(".modal.show").length && $("body").addClass("modal-open");
480 |         }).on('inserted.bs.tooltip', function (event) {
481 |             var zIndex = $this.options.starterZIndex + (10 * $(".modal.show").length);
482 |             var tooltipId = $(event.target).attr("aria-describedby");
483 |             $("#" + tooltipId).css("z-index", zIndex);
484 |         }).on('inserted.bs.popover', function (event) {
485 |             var zIndex = $this.options.starterZIndex + (10 * $(".modal.show").length);
486 |             var popoverId = $(event.target).attr("aria-describedby");
487 |             $("#" + popoverId).css("z-index", zIndex);
488 |         });
489 | 
490 |     };
491 | 
492 |     return new ModalWrapperFactory();
493 | }));
494 | 


--------------------------------------------------------------------------------
/nbproject/project.properties:
--------------------------------------------------------------------------------
 1 | auxiliary.org-netbeans-modules-javascript-nodejs.run_2e_enabled=false
 2 | browser.autorefresh.Chrome=true
 3 | browser.highlightselection.Chrome=true
 4 | browser.run=true
 5 | file.reference.bootstrap-modal-wrapper-public_html=public_html
 6 | file.reference.bootstrap-modal-wrapper-test=test
 7 | file.reference.NetBeansProjects-bootstrap-modal-wrapper=.
 8 | files.encoding=UTF-8
 9 | site.root.folder=${file.reference.NetBeansProjects-bootstrap-modal-wrapper}
10 | start.file=demo/bootstrap-modal-demo.html
11 | web.context.root=/bootstrap-modal-wrapper
12 | 


--------------------------------------------------------------------------------
/nbproject/project.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project xmlns="http://www.netbeans.org/ns/project/1">
 3 |     <type>org.netbeans.modules.web.clientproject</type>
 4 |     <configuration>
 5 |         <data xmlns="http://www.netbeans.org/ns/clientside-project/1">
 6 |             <name>bootstrap-modal-wrapper</name>
 7 |         </data>
 8 |     </configuration>
 9 | </project>
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "bootstrap-modal-wrapper",
 3 |     "version": "2.0.2",
 4 |     "description": "Bootstrap modal wrapper plugin creates dynamic and nested stacked dialog instances",
 5 |     "keywords": [
 6 |         "bootstrap",
 7 |         "modal",
 8 |         "dialog",
 9 |         "bootstrap modal",
10 |         "bootstrap dialog"
11 |     ],
12 |     "author": "javatmp",
13 |     "license": "MIT",
14 |     "bugs": {
15 |         "url": "https://github.com/JavaTMP/bootstrap-modal-wrapper/issues"
16 |     },
17 |     "homepage": "https://github.com/JavaTMP/bootstrap-modal-wrapper",
18 |     "devDependencies": {
19 |         "del": "^5.0.0",
20 |         "gulp": "^4.0.2",
21 |         "gulp-eslint": "^6.0.0",
22 |         "gulp-header": "^2.0.7",
23 |         "gulp-rename": "^1.4.0",
24 |         "gulp-uglify": "^3.0.1"
25 |     },
26 |     "dependencies": {
27 |         "bootstrap": "^4.2.1",
28 |         "jquery": "^3.4.1",
29 |         "popper.js": "^1.14.6"
30 |     },
31 |     "scripts": {},
32 |     "repository": {
33 |         "type": "git",
34 |         "url": "https://github.com/JavaTMP/bootstrap-modal-wrapper.git"
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # Bootstrap Modal Wrapper
  2 | Bootstrap modal wrapper factory for creating dynamic and nested stacked dialog instances.
  3 | 
  4 | [![](https://data.jsdelivr.com/v1/package/npm/bootstrap-modal-wrapper/badge)](https://www.jsdelivr.com/package/npm/bootstrap-modal-wrapper)
  5 | 
  6 | ## Installation Using NPM
  7 | ```
  8 | npm install bootstrap-modal-wrapper
  9 | ```
 10 | 
 11 | ## Building from The source
 12 | Make sure node.js and git client are locally installed on your machine and then run the following commands:
 13 | ```
 14 | cd bootstrap-modal-wrapper
 15 | npm install
 16 | gulp
 17 | ```
 18 | ## Demo And Examples
 19 | Online demo of all below examples can be found in the following JavaTMP demo pages:
 20 | - [Bootstrap Modal Online Demo](http://java.javatmp.com/#/pages/static/plugins/bootstrap-modal-wrapper).
 21 | 
 22 | ### BOOTSTRAP MESSAGE MODAL
 23 | The simplest scenario of modal wrapper is to show a simple message when use press a button:
 24 | ```html
 25 | <button id="simple-message" type="button" class="btn btn-primary">
 26 |     Basic Message
 27 | </button>
 28 | <script type="text/javascript">
 29 |     jQuery(function ($) {
 30 |         $("#simple-message").on("click", function (event) {
 31 |             BootstrapModalWrapperFactory.showMessage("Delfault Message to show to user");
 32 |         });
 33 |     });
 34 | </script>
 35 | ```
 36 | 
 37 | ### BOOTSTRAP ALERT MODAL
 38 | The simple scenario of modal wrapper is to show a simple alert when use press a button:
 39 | ```html
 40 | <button id="simple-alert" type="button" class="btn btn-primary">
 41 |     Basic Alert
 42 | </button>
 43 | <script type="text/javascript">
 44 |     jQuery(function ($) {
 45 |         $("#simple-alert").on("click", function (event) {
 46 |             BootstrapModalWrapperFactory.alert("Delfault alert <b>with only message Text</b>");
 47 |         });
 48 |     });
 49 | </script>
 50 | ```
 51 | 
 52 | ### BOOTSTRAP CONFIRMATION MODAL
 53 | JavaTMP Bootstrap modal wrapper factory provides a confirmation dialog too with ability to run different code.
 54 | See the following example:
 55 | ```html
 56 | <button id="simple-confirm" type="button" class="btn btn-primary">
 57 |     Basic Confirm
 58 | </button>
 59 | <script type="text/javascript">
 60 |     jQuery(function ($) {
 61 |         $("#simple-confirm").on("click", function (event) {
 62 |             BootstrapModalWrapperFactory.confirm({
 63 |                 title: "Confirm",
 64 |                 message: "Are You Sure ?",
 65 |                 onConfirmAccept: function () {
 66 |                     BootstrapModalWrapperFactory.alert("Thank you for ACCEPTING the previous confiramtion dialog");
 67 |                 },
 68 |                 onConfirmCancel: function () {
 69 |                     BootstrapModalWrapperFactory.alert("Thank you for CANCELING the previous confiramtion dialog");
 70 |                 }
 71 |             });
 72 |         });
 73 |     });
 74 | </script>
 75 | ```
 76 | ### JAVATMP BOOTSTRAP MODAL WRAPPER `CREATEMODAL` METHOD
 77 | The JavaTMP Bootstrap Modal wrapper object provides a general method `createModal` which creates modals dynamically.
 78 | the implementation of `BootstrapModalWrapperFactory.alert` and `BootstrapModalWrapperFactory.confirm` methods use `createModal`
 79 | to provide desired behaviors.
 80 | The following examples show you how to use `createModal` method in action:
 81 | #### Create simple Bootstrap Modal wrapper instance dynamically
 82 | ```JS
 83 | var onlyBody = BootstrapModalWrapperFactory.createModal({
 84 |     message: "Simple Message body",
 85 |     closable: false,
 86 |     closeByBackdrop: true
 87 | });
 88 | onlyBody.show();
 89 | ```
 90 | #### Create a simple bootstrap modal wrapper with body and title only:
 91 | ```JS
 92 | var modalWrapper = BootstrapModalWrapperFactory.createModal({
 93 |     message: "Simple Message body",
 94 |     title: "Header Title",
 95 |     closable: true,
 96 |     closeByBackdrop: true
 97 | });
 98 | modalWrapper.show();
 99 | ```
100 | #### Create a simple bootstrap modal wrapper with a button to close and destroy it
101 | ```JS
102 | var modalWrapper = BootstrapModalWrapperFactory.createModal({
103 |     message: "Simple Message body",
104 |     title: "Header Title",
105 |     closable: false,
106 |     closeByBackdrop: false,
107 |     buttons: [
108 |         {
109 |             label: "Close Me",
110 |             cssClass: "btn btn-primary",
111 |             action: function (button, buttonData, originalEvent) {
112 |                 return this.hide();
113 |             }
114 |         }
115 |     ]
116 | });
117 | modalWrapper.show();
118 | ```
119 | #### Create nested bootstrap modal wrapper instances dynamically:
120 | ```JS
121 | var modalWrapper = BootstrapModalWrapperFactory.createModal({
122 |     message: "Simple Message body",
123 |     title: "Header Title",
124 |     closable: false,
125 |     closeByBackdrop: false,
126 |     buttons: [
127 |         {
128 |             label: "Close",
129 |             cssClass: "btn btn-secondary",
130 |             action: function (button, buttonData, originalEvent) {
131 |                 return this.hide();
132 |             }
133 |         },
134 |         {
135 |             label: "Create alert",
136 |             cssClass: "btn btn-primary",
137 |             action: function (button, buttonData, originalEvent) {
138 |                 BootstrapModalWrapperFactory.alert("Alert Modal Created");
139 |             }
140 |         }
141 |     ]
142 | }).show();
143 | ```
144 | #### Update title and body of bootstrap modal wrapper dynamically after showing:
145 | ```JS
146 | BootstrapModalWrapperFactory.createModal({
147 |     message: "Simple Message body",
148 |     title: "Header Title",
149 |     closable: false,
150 |     closeByBackdrop: false,
151 |     buttons: [
152 |         {
153 |             label: "Close",
154 |             cssClass: "btn btn-secondary",
155 |             action: function (button, buttonData, originalEvent) {
156 |                 return this.hide();
157 |             }
158 |         },
159 |         {
160 |             label: "Update Title & Message",
161 |             cssClass: "btn btn-primary",
162 |             action: function (button, buttonData, originalEvent) {
163 |                 this.updateTitle("New Title");
164 |                 this.updateMessage("Updated message content");
165 |             }
166 |         }
167 |     ]
168 | }).show();
169 | ```
170 | #### Update the size of shown bootstrap modal dynamically:
171 | ```JS
172 | BootstrapModalWrapperFactory.createModal({
173 |     message: "Simple Message body",
174 |     title: "Header Title",
175 |     closable: false,
176 |     closeByBackdrop: false,
177 |     buttons: [
178 |         {
179 |             label: "Close",
180 |             cssClass: "btn btn-secondary",
181 |             action: function (button, buttonData, originalEvent) {
182 |                 return this.hide();
183 |             }
184 |         },
185 |         {
186 |             label: "Make Me Large",
187 |             cssClass: "btn btn-primary",
188 |             action: function (button, buttonData, originalEvent) {
189 |                 this.originalModal.find(".modal-dialog").css({transition: 'all 0.4s'});
190 |                 this.updateSize("modal-lg");
191 |             }
192 |         },
193 |         {
194 |             label: "Make Me Small",
195 |             cssClass: "btn btn-primary",
196 |             action: function (button, buttonData, originalEvent) {
197 |                 this.originalModal.find(".modal-dialog").css({transition: 'all 0.4s'});
198 |                 this.updateSize("modal-sm");
199 |             }
200 |         },
201 |         {
202 |             label: "Make Me Default",
203 |             cssClass: "btn btn-primary",
204 |             action: function (button, buttonData, originalEvent) {
205 |                 this.originalModal.find(".modal-dialog").css({transition: 'all 0.4s'});
206 |                 this.updateSize(null);
207 |             }
208 |         }
209 |     ]
210 | }).show();
211 | ```
212 | #### Create Bootstrap Modal wrapper buttons dynamically and remove them:
213 | ```JS
214 | var buttonsCount = 0;
215 | BootstrapModalWrapperFactory.createModal({
216 |     message: "Simple Message body",
217 |     title: "Header Title",
218 |     closable: false,
219 |     closeByBackdrop: false,
220 |     buttons: [
221 |         {
222 |             label: "Close",
223 |             cssClass: "btn btn-secondary",
224 |             action: function (button, buttonData, originalEvent) {
225 |                 return this.hide();
226 |             }
227 |         },
228 |         {
229 |             label: "Add Button",
230 |             cssClass: "btn btn-primary",
231 |             action: function (button, buttonData, originalEvent) {
232 |                 this.addButton({
233 |                     id: "id-" + (++buttonsCount),
234 |                     label: "New " + buttonsCount,
235 |                     cssClass: "btn btn-secondary",
236 |                     action: function (button, buttonData, originalEvent) {
237 |                         BootstrapModalWrapperFactory.showMessage("nothing only to show attached event to button id [" + buttonData.id + "]");
238 |                         return true;
239 |                     }
240 |                 });
241 |             }
242 |         },
243 |         {
244 |             label: "Delete Button",
245 |             cssClass: "btn btn-primary",
246 |             action: function (button, buttonData, originalEvent) {
247 |                 this.removeButton("id-" + (buttonsCount--));
248 |             }
249 |         }
250 |     ]
251 | }).show();
252 | ```
253 | #### Simulate Updating Bootstrap Modal wrapper instace dynamically with AJAX response content:
254 | ```JS
255 | var m = BootstrapModalWrapperFactory.createModal({
256 |     message: '<div class="text-center"><i class="fa fa-refresh fa-spin fa-3x fa-fw text-primary"></i></div>',
257 |     closable: false,
258 |     closeByBackdrop: false
259 | });
260 | m.originalModal.find(".modal-dialog").css({transition: 'all 0.5s'});
261 | m.show();
262 | setTimeout(function () {
263 |     m.updateSize("modal-lg");
264 |     m.updateTitle("Message Received");
265 |     m.updateMessage("Message Content");
266 |     m.addButton({
267 |         label: "Close",
268 |         cssClass: "btn btn-secondary",
269 |         action: function (button, buttonData, originalEvent) {
270 |             return this.hide();
271 |         }
272 |     });
273 | }, 3000);
274 | ```
275 | #### Advanced AJAX Bootstrap Modal Wrapper Contents
276 | You can simply adapt and use the bootstrap modal wrapper to provide a dynamic Bootstrap modal with remote AJAX contents
277 | using `createAjaxModal` method, For example:
278 | ```JS
279 | BootstrapModalWrapperFactory.createAjaxModal({
280 |     message: '<div class="text-center">Loading</div>',
281 |     closable: true,
282 |     title: "AJAX Content",
283 |     closeByBackdrop: false,
284 |     localData: {},
285 |     ajax: { // all jquery.ajax parameters are supported.
286 |         url: "",
287 |         data: {}
288 |     },
289 |     ajaxContainerReadyEventName: "event-name-triggered-once-ajax-content-updated"
290 | });
291 | ```
292 | 
293 | And the following are the response HTML code from the above URL:
294 | ```HTML
295 | <div class="dynamic-ajax-content">
296 |     <div class="row">
297 |         <div class="col-lg-12">
298 |             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
299 |         </div>
300 |     </div>
301 |     <script type="text/javascript">
302 |         jQuery(function ($) {
303 |             // here we can reference the container bootstrap modal by its id
304 |             // passed as parameter to request by name "ajaxModalId"
305 |             // or for demo purposese ONLY we can get a reference top modal
306 |             // in current open managed instances in BootstrapModalWrapperFactory
307 |             var currentParentModal = BootstrapModalWrapperFactory.globalModals[BootstrapModalWrapperFactory.globalModals.length - 1];
308 |             $("#" + currentParentModal.options.id).on(currentParentModal.options.ajaxContainerReadyEventName, function (event, modal) {
309 |                 modal.addButton({
310 |                     label: "Update closable by backdrop click",
311 |                     cssClass: "btn btn-info",
312 |                     action: function (button, buttonData, originalEvent) {
313 |                         this.updateClosableByBackdrop(true);
314 |                     }
315 |                 });
316 |                 modal.addButton({
317 |                     label: "Show Ajax Parameters",
318 |                     cssClass: "btn btn-info",
319 |                     action: function (button, buttonData, originalEvent) {
320 |                         alert("modal.options.url [" + modal.options.url + "]");
321 |                     }
322 |                 });
323 |                 modal.addButton({
324 |                     label: "Show localData Object",
325 |                     cssClass: "btn btn-info",
326 |                     action: function (button, buttonData, originalEvent) {
327 |                         alert("You can Use the following data came from initiator sender code : " + JSON.stringify(modal.options.localData));
328 |                     }
329 |                 });
330 |                 modal.addButton({
331 |                     label: "Run Function from Sender",
332 |                     cssClass: "btn btn-info",
333 |                     action: function (button, buttonData, originalEvent) {
334 |                         modal.options.localData.funRef();
335 |                     }
336 |                 });
337 |                 modal.addButton({
338 |                     label: "Close",
339 |                     cssClass: "btn btn-primary",
340 |                     action: function (button, buttonData, originalEvent) {
341 |                         return this.hide();
342 |                     }
343 |                 });
344 |                 modal.addButton({
345 |                     label: "Show Alert Dialog",
346 |                     cssClass: "btn btn-success",
347 |                     action: function (button, buttonData, originalEvent) {
348 |                         BootstrapModalWrapperFactory.alert("Alert Modal Created From within Ajax Content");
349 |                     }
350 |                 });
351 |             });
352 |         });
353 |     </script>
354 | </div>
355 | ```
356 | 
357 | ## Copyright and License
358 | Bootstrap-modal-wrapper is copyrighted by [JavaTMP](http://www.javatmp.com) and
359 | licensed under [MIT license](https://github.com/JavaTMP/bootstrap-modal-wrapper/blob/master/LICENSE).
360 | 


--------------------------------------------------------------------------------