Create Dynamic Bootstrap 4 Modal Windows - jQuery EZModal.js

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.

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

<link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="" 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.;

6. Trigger a function when the modal is closed.

  // 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.

  • Publication date: 07.03.2018
  • Source