Dynamic Bootstrap 4 Modal Manipulation Plugin - jQuery iModal

Dynamic Bootstrap 4 Modal Manipulation Plugin - jQuery iModal
File Size: 6.29 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

iModal is a lightweight jQuery plugin for easy creation of Bootstrap 4 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 4 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 4 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: ""
  
});

Changelog:

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.