Dynamic Bootstrap 4/5 Modal Manipulation Plugin - jQuery iModal

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.

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<!-- Required JavaScript -->
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<!-- iModal Plugin -->
<script src="/path/to/dist/iModal.js"></script>

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

iModal();

3. Push title & HTML content to the modal.

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

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

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

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

iModal({
  title: 'Modal Title Here',
  size: 'lg'
});

6. Customize the text displayed in the close button. Default: 'close'.

iModal({
  title: 'Modal Title Here',
  closeText: 'dismiss'
});

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

iModal({
  title: 'Modal Title Here',
  keyboard: false
});

8. Enable/disable the modal backdrop.

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

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

iModal({

  // shows/hides header and footer
  header: true,
  footer: true,

  // primary, secondary, success, warning, danger, or info
  headerClass: "",
  footerClass: ""
  
});

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

iModal({
  title: 'Modal Title Here',
  dialogScrollable: false
});

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

iModal({
  title: 'Modal Title Here',
  dialogCentered: true
});

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

iModal({
  title: 'Modal Title Here',
  fade: true
});

13. Customize the backdrop.

iModal({

  // true or false
  backdrop: true,

  // 'success', 'primary', 'info', 
  // 'warning', 'danger', 'secondary'
  backdropColor: false

});

14. Available callback functions.

iModal({
  onShow: function(){},
  onShowed: function(){},
  onHide: function(){},
  onHidden: function(){},
  onHidePrevented: function(){},
});

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

<button type="button" onclick="muFunction();">Button</button>

// JavaScript
function muFunction(){
  $.ajax({
    type: 'POST',
    url: '/url/to',
    beforeSend: function(){
      iModal({title:'My title'});
    },
    success: function(response){
      $("#iModal .modal-body").html(response);
    },
  });
}

Changelog:

2021-01-19

• Added Bootstrap 5 support.

2020-11-07

• JS updated

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

---

This awesome jQuery plugin is developed by GuxMartin. For more Advanced Usages, please check the demo page or visit the official website.