This time I will share jQuery Plugin and tutorial about Dynamic Bootstrap 4 Modal Manager – jQuery bsModal, hope it will help you in programming stack.
Just another Bootstrap 4 modal manager that makes it easier to create dynamic, customizable, multi-language Bootstrap 4 based dialogs & modal windows with native options and event handlers.
How to use it:
1. Install & Download the bsModal library via package managers.
2 |
$ yarn add jquery-plugin-bsmodal |
5 |
$ npm install jquery-plugin-bsmodal --save |
2. Load the main JavaScript file bsmodal.js into your Bootstrap 4 project.
2 |
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> |
3 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
4 |
<script src="/path/to/cdn/bootstrap.min.js"></script> |
7 |
<script src="/dist/bsmodal.js"></script> |
3. Enable a trigger button to toggle a basic Bootstrap 4 modal.
1 |
<button type="button" class="btn btn-primary" id="exampleBtn"> |
1 |
$('#exampleBtn').bsModal({ |
4. Customize the appearance of the modal window.
01 |
$('#exampleBtn').bsModal({ |
40 |
confirmCancelText: '', |
44 |
okBtnColor: 'primary', |
45 |
cancelBtnColor: 'secondary' |
5. Available event handlers.
01 |
$('#exampleBtn').bsModal({ |
03 |
onOpen: function onOpen() { |
06 |
onClose: function onClose() { |
09 |
onOk: function onOk() { |
12 |
onCancel: function onCancel() { |
Changelog:
v1.2.1 (2021-03-02)
v1.1.1 (2021-01-07)
- Fix the onOpen, onOk, onCancel not working in bsModalCropper()
2020-11-20
- Add uploadFile argument to onUpload & onCropper callback
2019-02-20
- Fix confirm mode button text wrong
2018-12-25
