Bootstrap Ajax Modal Plugin With jQuery - ModalJX
File Size: | 6.71 KB |
---|---|
Views Total: | 1034 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
ModalJX is a simple-to-use jQuery plugin used to create dynamic, cacheable Bootstrap modal windows using AJAX.
How to use it:
1. Load the jQuery ModalJX plugin's script into your web project which has jQuery and Bootstrap installed.
<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> <!-- Bootstrap Modal Ajax Plugin --> <script src="src/modaljx.js"></script>
2. Create a link to toggle a modal window that loads an external file via AJAX.
<a href="ajax.html" class="ajax-modal">Basic Link</a>
$('.ajax-modal').modaljx();
3. Create a button to toggle a modal window that loads an external file via AJAX.
<button data-target="ajax.html" class="ajax-modal">Basic Button</button>
$('.ajax-modal').modaljx();
4. Customize the AJAX modal window with the following options.
$('.ajax-modal').modaljx({ cacheable : false, canHideOnFail : false, staticBackdrop : false, modalClass : '', spinner : '<div class="progress progress-striped active" style="margin-top: 10%;"><div class="progress-bar progress-bar-info" style="width: 100%"></div></div>', ajax : { type : 'GET', // or POST beforeSend : function () {} } });
5. Callback function available.
$('.ajax-modal').modaljx({ onFail: function(){}, onSuccess: function(){}, onShown: function(){}, onClose: function(){} });
Change log:
2017-01-19
- JS update
This awesome jQuery plugin is developed by m-cakir. For more Advanced Usages, please check the demo page or visit the official website.