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.
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.
2 |
< link rel = "stylesheet" href = "/path/to/bootstrap.min.css" /> |
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 > |
8 |
< script src = "/path/to/dist/iModal.js" ></ script > |
2. Create and display a basic Bootstrap modal on the screen.
3. Push title & HTML content to the modal.
2 |
title: 'Modal Title Here' |
4 |
$( '#iModal .modal-body' ).html( 'HTML Content Here' ); |
4. Or define the modal body in the body
option.
2 |
title: 'Modal Title Here' , |
3 |
body: 'Any HTML Content Here' |
5. Change the size of the modal window: ‘sm’, ‘lg’, or ‘xl’.
2 |
title: 'Modal Title Here' , |
6. Customize the text displayed in the close button. Default: ‘close’.
2 |
title: 'Modal Title Here' , |
7. Disable the ESC key to close the modal window.
2 |
title: 'Modal Title Here' , |
8. Enable/disable the modal backdrop.
2 |
title: 'Modal Title Here' , |
9. Determine whether or not to show footer/header.
10. Determine whether or not to scroll the modal body. Default: false.
2 |
title: 'Modal Title Here' , |
11. Determine whether or not to center the modal body vertically. Default: false.
2 |
title: 'Modal Title Here' , |
12. Enable/disable the fade animation. Default: true.
2 |
title: 'Modal Title Here' , |
13. Customize the backdrop.
14. Available callback functions.
3 |
onShowed: function (){}, |
5 |
onHidden: function (){}, |
6 |
onHidePrevented: function (){}, |
15. This example shows how to inject AJAX content into the modal.
01 |
<button type= "button" onclick= "muFunction();" >Button</button> |
04 |
function muFunction(){ |
08 |
beforeSend: function (){ |
09 |
iModal({title: 'My title' }); |
11 |
success: function (response){ |
12 |
$( "#iModal .modal-body" ).html(response); |
Changelog:
2021-01-19
- Added Bootstrap 5 support.
2020-11-07
2020-11-06
2020-08-20
- Convert backdrop to static when you disable ESC
2020-07-31
- Allows to set backdrop color
2020-05-30
2020-04-19
- Added new settings: Properties: dialogScrollable, dialogCentered & fade
2020-01-06