Minimal AJAX Modal/Lightbox Plugin with jQuery

An ultra-light jQuery lightbox plugin for displaying a responsive modal popup window that loads content via Ajax requests.

How to use it:

1. Load jQuery library and the jQuery AJAX Modal Lightbox plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="modal.jquery.js"></script>

2. Create a trigger link to load an external URL into the modal via AJAX.

<a href="#" class="modal" data-content="demo.html">Show</a>

3. Initialize the plugin and set the CSS selectors for the modal.

$('.modal').modal({
  'modal': 'modal-window',
  'close': 'modal-close',
  'closeText': 'Close',
  'shade': 'modal-shade'
});

4. Add your own styles to the modal in the CSS.

.modal-window {
  position: fixed;
  left: 50%;
  top: 50px;
  width: 60%;
  padding: 30px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 5px rgba(0,0,0,.5);
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  z-index: 2;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.modal-shade {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.7);
  z-index: 1;
}

---

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