Bootstrap Ajax Modal Plugin With jQuery - ModalJX

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.