Lightweight jQuery Content & Image Lightbox Plugin - Simple Modals

A simple lightweight jQuery plugin used to create responsive, animated, customizable modal popups for images and inline Html elements.

Basic usage:

1. Include jQuery library together with the simple_modal.css and simple_modal.js on your Html page.

<link href="simple_modal.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="simple_modal.js"></script>

2. Embed your content into the modal as follow:

<div class="simple-modal-wrapper" 
     data-modal-id="modal-demo" 
     data-animation-duration="500">
  <div class="modal-content">
    <p class="modal-heading"> Modal Title </p>
    <div class="modal-body"> Molda Content </div>
  </div>
</div>

3. By default the modal content is hidden on page load and we need a trigger button to toggle it. Make sure the data-trigger-modal-id and data-modal-id must have the same value.

<button class="simple-modal-trigger" 
        data-trigger-modal-id="modal-demo">
  Click me
</button>

4. To create an image lightbox, just add the required class 'image-modal' to your image and done.

<img src="1.jpg" class="image-modal">

5. You're allowed to use data-animation-duration attribute to specify the animation speed for the modal popups. Set to 0 to disable the transition effect.

<img src="1.jpg" data-animation-duration="0" class="image-modal">

Change logs:

2015-07-22

• FIXED the click event bubbling bug that prevented submits

2015-03-18

• ADD 'x' mark for image modals
• ADD min files

---

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