Create Dynamic Bootstrap 5/4 Modals In jQuery - bootstrap-show-modal.js
File Size: | 22.5 KB |
---|---|
Views Total: | 14036 |
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 5 or Bootstrap 4 modal component.
How to use it:
1. To use the plugin start with loading the latest jQuery library and Bootstrap framework in the document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <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.
<script src="src/bootstrap-show-modal.js"></script>
3. The JavaScript to create an alert popup with an OK button.
$.Modal.alert({ title: "Alert Popup", body: "This is an alert popup" })
4. The JavaScript to create a basic modal window.
$.Modal.show({ title: "Modal Window", body: "This is a basic modal window" })
5. The JavaScript to create a confirmation dialog with confirm/cancel actions.
$.Modal.confirm({ title: "Confirm Dialog", body: "Are You Sure", textTrue: "Okey", textFalse: "Cancel", confirmed: function (result) { if (result) { // do something } else { // do something } }, hidden: function () { // do something } })
6. All default options.
{ // modal title title: "", // modal body body: "", // modal footer footer: "", // additional CSS class(es) modalClass: "fade", // additional CSS class(es) for ".modal-dialog" modalDialogClass: "", // Bootstrap 4 modal's options options: { backdrop: 'static' // disallow closing on click in the background }, // called after created onCreate: null, // called after the modal was shown and completely faded in onShown: null, // called after disposed onDispose: null, // called after confirmed // $.showConfirm only onSubmit: function(result, modal){} }
Changelog:
v5.0.2 (2022-08-10)
- Updated Bootstrap 5 version
v5.0.0 (2022-08-06)
- Removed jQuery dependency from Bootstrap 5 version.
v3.0.3 (2022-01-21)
- Fixed Bootstrap 5 version.
v3.0.2 (2021-12-11)
- Added Bootstrap 5 version.
v1.4.3 (2021-07-24)
- setting "backdrop: 'static'" as default
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)` to `onSubmit(result, modal)`
v1.1.17 (2019-02-26)
- Better IE support, without polyfill.
v1.1.12 (2018-11-23)
- Made the fade effect default
This awesome jQuery plugin is developed by shaack. For more Advanced Usages, please check the demo page or visit the official website.