This time I will share jQuery Plugin and tutorial about Create Dynamic Bootstrap 4 Modals In jQuery – bootstrap-show-modal.js, hope it will help you in programming stack.
File Size: | 9.62 KB |
---|---|
Views Total: | 9198 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another Bootstrap 4 modal wrapper plugin which lets you create beautiful, responsive, dynamic alert/confirm dialog boxes and complex modal windows using Bootstrap 4 modal component.
How to use it:
1. To use the plugin start with loading the latest jQuery library and Bootstrap 4 framework in the document.
1 |
< link rel = "stylesheet" href = "/path/to/cdn/bootstrap.min.css" /> |
2 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
3 |
< script src = "/path/to/cdn/bootstrap.min.js" ></ script > |
2. Load the JavaScript bootstrap-show-modal.js
after jQuery library and we’re ready to go.
1 |
< script src = "src/bootstrap-show-modal.js" ></ script > |
3. The JavaScript to create an alert popup with an OK button.
1 |
$.<a href= "https://www.jqueryscript.net/tags.php?/Modal/" >Modal</a>.alert({ |
2 |
title: "Alert Popup" , |
3 |
body: "This is an alert popup" |
4 |
}) |
4. The JavaScript to create a basic modal window.
1 |
$.Modal.show({ |
2 |
title: "Modal Window" , |
3 |
body: "This is a basic modal window" |
4 |
}) |
5. The JavaScript to create a confirmation dialog with confirm/cancel actions.
01 |
$.Modal.confirm({ |
02 |
title: "Confirm Dialog" , |
03 |
body: "Are You Sure" , |
04 |
textTrue: "Okey" , |
05 |
textFalse: "Cancel" , |
06 |
confirmed: function (result) { |
07 |
if (result) { |
08 |
// do something |
09 |
} else { |
10 |
// do something |
11 |
} |
12 |
}, |
13 |
hidden: function () { |
14 |
// do something |
15 |
} |
16 |
}) |
6. All default options.
01 |
{ |
02 |
03 |
// modal title |
04 |
title: "" , |
05 |
06 |
// modal body |
07 |
body: "" , |
08 |
09 |
// modal footer |
10 |
footer: "" , |
11 |
12 |
// additional CSS class(es) |
13 |
modalClass: "fade" , |
14 |
15 |
// additional CSS class(es) for ".modal-dialog" |
16 |
modalDialogClass: "" , |
17 |
18 |
// Bootstrap 4 modal's options |
19 |
options: null |
20 |
21 |
// called after created |
22 |
onCreate: null , |
23 |
24 |
// called after the modal was shown and completely faded in |
25 |
onShown: null , |
26 |
27 |
// called after disposed |
28 |
onDispose: null , |
29 |
30 |
// called after confirmed |
31 |
// $.showConfirm only |
32 |
onSubmit: function (result, modal){} |
33 |
|
34 |
} |
Changelog:
v1.4.2 (2021-01-19)
- fixed bug this => self
v1.3.7 (2020-10-08)
- package updated
v1.3.6 (2020-08-05)
- JS updated
v1.3.0 (2020-07-28)
- API changed reverted
v1.2.2 (2020-07-24)
- API changed
v1.1.20 (2020-07-07)
- added btn-cancel class
v1.1.18 (2020-04-03)
- changed callback
onSubmit(result)
toonSubmit(result, modal)
v1.1.17 (2019-02-26)
- Better IE support, without polyfill.
v1.1.12 (2018-11-23)
- Made the fade effect default