bootstrap4 modal manager bsmodal - Free Download Dynamic Bootstrap 4 Modal Manager - jQuery bsModal

Free Download Dynamic Bootstrap 4 Modal Manager – jQuery bsModal

Posted on

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.

bootstrap4 modal manager bsmodal - Free Download Dynamic Bootstrap 4 Modal Manager - jQuery bsModal
File Size: 194 KB
Views Total: 1828
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 # Yarn
2 $ yarn add jquery-plugin-bsmodal
3  
4 # NPM
5 $ npm install jquery-plugin-bsmodal --save

2. Load the main JavaScript file bsmodal.js into your Bootstrap 4 project.

1 <!-- Bootstrap 4-->
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>
5  
6 <!-- bsmodal plugin -->
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">
2   Launch demo modal
3 </button>
1 $('#exampleBtn').bsModal({
2   id: 'bsModal',
3   title: 'Modal Title',
4   body: 'Modal Body'
5 });

4. Customize the appearance of the modal window.

01 $('#exampleBtn').bsModal({
02  
03   // modal ID
04   id: 'exampleModal',
05  
06   // modal title
07   title: 'Modal title',
08  
09   // 5 = <h5>
10   titleLavel: 5,
11  
12   // body text
13   body: '',
14  
15   // title ID
16   label: null,
17  
18   // language
19   lang: null,
20  
21   // modal selector
22   modal: null,
23  
24   // enable/disable fade animation
25   fade: true,
26  
27   // shows close button
28   close: true,
29  
30   // shows background overlay
31   backdrop: true,
32  
33   // uses confirm mode
34   confirm: false,
35  
36   // text
37   okBtnText: '',
38   cancelBtnText: '',
39   confirmOkText: '',
40   confirmCancelText: '',
41   langs: {},
42  
43   // theme
44   okBtnColor: 'primary',
45   cancelBtnColor: 'secondary'
46  
47 });

5. Available event handlers.

01 $('#exampleBtn').bsModal({
02  
03   onOpen: function onOpen() {
04     return true;
05   },
06   onClose: function onClose() {
07     return true;
08   },
09   onOk: function onOk() {
10     return true;
11   },
12   onCancel: function onCancel() {
13     return true;
14   }
15  
16 });

Changelog:

v1.2.1 (2021-03-02)

  • Bugfix

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

  • v1.0.9