Create Dynamic Bootstrap 4 Modal Windows - jQuery EZModal.js

EZModal.js is a lightweight JavaScript class for Bootstrap 4 that enables you to create Bootstrap 4 powered modal windows dynamically.

How to use it:

1. Install the necessary jQuery library and Bootstrap 4 framework in your project.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

2. Load the JavaScript file EZModal.js after jQuery.

<script src="EZModal.js"></script>

3. Create a new Bootstrap 4 modal instance.

const modal = new EZModal('mymodal')

4. Set the title, body, and footer for the Bootstrap 4 modal.

const modal = new EZModal('mymodal')
      .setTitle('h4', 'Modal Title')
      .setElement('body', '<p> Modal Body !</p>')
      .setElement('footer', '<button>Close</button>');

5. Show the Bootstrap 4 modal on the screen.

modal.show();

6. Trigger a function when the modal is closed.

modal.onClose(function(){
  // do something
})

7. The plugin also supports the native Bootstrap 4 modal events.

modal.on(event, callback)

---

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