This time I will share jQuery Plugin and tutorial about jQuery Plugin To Create Dynamic Custom Bootstrap Modals, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> |
2 |
<script src="/path/to/jquery.min.js"></script> |
3 |
<script src="/path/to/bootstrap.min.js"></script> |
2. Load the minified version of the Bootstrap Modal Maker plugin after jQuery.
1 |
<script src="jquery.bootstrap-modal-maker.min.js"></script> |
3. Display a default Bootstrap modal with custom title & content on page load.
2 |
'title': 'Hello World!', |
3 |
'content': 'Modal Content Goes Here!' |
4. Display a default Bootstrap modal (confirm dialog) with custom title & content on page load.
2 |
'title': 'Hello World!', |
3 |
'content': 'Modal Content Goes Here!' |
5. Create your own actions buttons with callbacks inside the modal.
05 |
"class": "btn-default", |
06 |
"callback": function () { |
13 |
"class": "btn-danger", |
14 |
"callback": function () { |
6. Assign an unique ID to the modal. Good for multiple modal instances on one page.
2 |
'title': 'Hello World!', |
3 |
'content': 'Inner html' |
7. The plugin also supports innerHTML.
2 |
'title': 'Hello World!', |
3 |
'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.
