dynamic bootstrap imodal - Free Download Dynamic Bootstrap 4/5 Modal Manipulation Plugin - jQuery iModal

Free Download Dynamic Bootstrap 4/5 Modal Manipulation Plugin – jQuery iModal

Posted on

This time I will share jQuery Plugin and tutorial about Dynamic Bootstrap 4/5 Modal Manipulation Plugin – jQuery iModal, hope it will help you in programming stack.

dynamic bootstrap imodal - Free Download Dynamic Bootstrap 4/5 Modal Manipulation Plugin - jQuery iModal
File Size: 16.4 KB
Views Total: 1363
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

iModal is a lightweight jQuery plugin for easy creation of Bootstrap 4 & Bootstrap 5 modal windows that enable you to dynamically push content to the modal body.

How to use it:

1. Insert the iModal plugin’s files into the Bootstrap project.

1 <!-- Bootstrap Stylesheet -->
2 <link rel="stylesheet" href="/path/to/bootstrap.min.css" />
3 <!-- Required JavaScript -->
4 <script src="/path/to/jquery.slim.min.js"></script>
5 <script src="/path/to/popper.min.js"></script>
6 <script src="/path/to/bootstrap.min.js"></script>
7 <!-- iModal Plugin -->
8 <script src="/path/to/dist/iModal.js"></script>

2. Create and display a basic Bootstrap modal on the screen.

1 iModal();

3. Push title & HTML content to the modal.

1 iModal({
2   title: 'Modal Title Here'
3 });
4 $('#iModal .modal-body').html('HTML Content Here');

4. Or define the modal body in the body option.

1 iModal({
2   title: 'Modal Title Here',
3   body: 'Any HTML Content Here'
4 });

5. Change the size of the modal window: ‘sm’, ‘lg’, or ‘xl’.

1 iModal({
2   title: 'Modal Title Here',
3   size: 'lg'
4 });

6. Customize the text displayed in the close button. Default: ‘close’.

1 iModal({
2   title: 'Modal Title Here',
3   closeText: 'dismiss'
4 });

7. Disable the ESC key to close the modal window.

1 iModal({
2   title: 'Modal Title Here',
3   keyboard: false
4 });

8. Enable/disable the modal backdrop.

1 iModal({
2   title: 'Modal Title Here',
3   backdrop: false // true or static
4 });

9. Determine whether or not to show footer/header.

01 iModal({
02  
03   // shows/hides header and footer
04   header: true,
05   footer: true,
06  
07   // primary, secondary, success, warning, danger, or info
08   headerClass: "",
09   footerClass: ""
10    
11 });

10. Determine whether or not to scroll the modal body. Default: false.

1 iModal({
2   title: 'Modal Title Here',
3   dialog<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>able: false
4 });

11. Determine whether or not to center the modal body vertically. Default: false.

1 iModal({
2   title: 'Modal Title Here',
3   dialogCentered: true
4 });

12. Enable/disable the fade animation. Default: true.

1 iModal({
2   title: 'Modal Title Here',
3   fade: true
4 });

13. Customize the backdrop.

01 iModal({
02  
03   // true or false
04   backdrop: true,
05  
06   // 'success', 'primary', 'info',
07   // 'warning', 'danger', 'secondary'
08   backdropColor: false
09  
10 });

14. Available callback functions.

1 iModal({
2   onShow: function(){},
3   onShowed: function(){},
4   onHide: function(){},
5   onHidden: function(){},
6   onHidePrevented: function(){},
7 });

15. This example shows how to inject AJAX content into the modal.

01 <button type="button" onclick="muFunction();">Button</button>
02  
03 // JavaScript
04 function muFunction(){
05   $.ajax({
06     type: 'POST',
07     url: '/url/to',
08     beforeSend: function(){
09       iModal({title:'My title'});
10     },
11     success: function(response){
12       $("#iModal .modal-body").html(response);
13     },
14   });
15 }

Changelog:

2021-01-19

  • Added Bootstrap 5 support.

2020-11-07

2020-11-06

  • JS updated

2020-08-20

  • Convert backdrop to static when you disable ESC

2020-07-31

  • Allows to set backdrop color

2020-05-30

  • Added events.

2020-04-19

  • Added new settings: Properties: dialogScrollable, dialogCentered & fade

2020-01-06

  • Added new settings