Minimal Responsive Modal Window Plugin With jQuery - LiteBox

LiteBox is a lightweight and easy-to-use jQuery modal plugin which help you present any html content in a responsive, customizable popup window.

How to use it:

1. First you need to make sure both jQuery library and the jQuery LiteBox plugin are loaded correctly as follow:

$('.litebox-trigger').LiteBox();

2. Create a trigger element and specify the data source using href attribute.

<a class="litebox-trigger" 
   href="content.html">
   Click Me!
</a>

<button class="litebox-trigger" 
        href="content.html">
        Buttons work, too!
</button>

3. Bind the LiteBox() to the trigger element and done.

$('.litebox-trigger').LiteBox();

4. Create a modal window that grabs the content on the page.

<script type="text/template" id="litebox-content">
  <h3>Hello!</h3>
  <p>I'm a lightbox that was generated from content inside a</p>
    <code>&lt;script type="text/template"&gt;&lt;/script&gt;</code>
  <p>tag on this same page</p>
</script>

<a class="litebox-trigger" 
   href="#" 
   data-template="#litebox-content">
   Click Me
</a>

5. Apply your own CSS styles to the modal window.

<a class="litebox-trigger" 
   href="content.html"
   data-class="custom-css">
   Click Me!
</a>

.customize-me {
  ...
}

6. Change the size of your modal window.

<a class="litebox-trigger" 
   href="content.html"
   data-size="sm">
   Small Modal
</a>

<a class="litebox-trigger" 
   href="content.html"
   data-size="lg">
   Large Modal
</a>

Change log:

2016-03-31

• improve iOS functionality

---

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