jQuery Plugin To Create Dynamic Custom Bootstrap Modals

A Bootstrap Modal Maker plugin with jQuery that makes it easier to create dynamic Bootstrap modals with custom titles, content, buttons and callbacks on your webpage.

How to use it:

1. Make sure you've loaded jQuery library, Bootstrap' stylesheet and Bootstrap modal component in the html document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Load the minified version of the Bootstrap Modal Maker plugin after jQuery.

<script src="jquery.bootstrap-modal-maker.min.js"></script>

3. Display a default Bootstrap modal with custom title & content on page load.

$.modalMaker({
  'title': 'Hello World!',
  'content': 'Modal Content Goes Here!'
});

4. Display a default Bootstrap modal (confirm dialog) with custom title & content on page load.

$.modalMaker({
  'title': 'Hello World!',
  'content': 'Modal Content Goes Here!'
});

5. Create your own actions buttons with callbacks inside the modal.

$.modalMaker({
  buttons: [
    {
      "text": "OK",
      "class": "btn-default",
      "callback": function () {
        alert("OK!");
      },
      "dismiss": true
    },
    {
      "text": "Cancel",
      "class": "btn-danger",
      "callback": function () {
        alert("Cancelled!");
      },
      "dismiss": true
    }
  ]
});

6. Assign an unique ID to the modal. Good for multiple modal instances on one page.

$.modalMaker({
  'title': 'Hello World!',
  'content': 'Inner html'
  'id': ""
});

7. The plugin also supports innerHTML.

$.modalMaker({
  'title': 'Hello World!',
  'content': '<p>Inner html</p>'
});

---

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