Beautiful Flexible Modal Window Plugin - cartonbox

cartonbox is a simple yet configurable jQuery plugin to create beautiful, flexible, user-friendly modal windows on the web application.

Features:

• Supports images, text, videos, iframes, etc.
• Fully responsive.
• Blurs the main content.
• Loading spinner.
• Gallery mode for grouped content.
• Prevents page scroll when the modal is activated.
• Useful callback functions.

How to use it:

1. Download and link to the required JavaScript & CSS files.

<link rel="stylesheet" href="/path/to/cartonbox.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/cartonbox.min.js"></script>

2. Add the CSS class to the media links and specify the media type in the data-cb-type attribute. All possible media types:

• img: image
• iframe: iframe content, Youtube video, etc
• inline: inline content

<a href="image.jpg" class="cartonbox" data-cb-type="img">Image</a>
<a href="#myModal" class="cartonbox" data-cb-type="inline">Inline</a>
<a href="https://youtube.com/embed/yRuGhX791FQ?rel=0&showinfo=0&autoplay=1&wmode=transparent" class="cartonbox" data-cb-type="iframe">Youtube Video</a>

3. To use the inline modal, make sure to insert the modal content into a hidden container:

<div style="display: none;">
  <div id="myModal">
    ... Modal Content ...
  </div>
</div>

4. To enable the gallery mode, make sure the media links have the same group name.

<a href="image.jpg" class="cartonbox" data-cb-type="img" data-cb-group="myGroup">Image</a>
<a href="#myModal" class="cartonbox" data-cb-type="inline" data-cb-group="myGroup">Inline</a>
<a href="https://youtube.com/embed/yRuGhX791FQ?rel=0&showinfo=0&autoplay=1&wmode=transparent" class="cartonbox" data-cb-type="iframe" data-cb-group="myGroup">Youtube Video</a>

5. You can also open the modal via URL hash.

<a href="image.jpg" class="cartonbox" data-cb-type="img" data-cb-hash="picture">Image</a>
<a href="#myModal" class="cartonbox" data-cb-type="inline" data-cb-hash="inline">Inline</a>
<a href="https://youtube.com/embed/yRuGhX791FQ?rel=0&showinfo=0&autoplay=1&wmode=transparent" class="cartonbox" data-cb-type="iframe" data-cb-hash="video">Youtube Video</a>

6. Add a unique ID (name) to the modal window.

<a href="image.jpg" class="cartonbox" data-cb-design="myImage">Image</a>

7. Load a part of webpage in the modal window using the data-cb-fragment attribute.

<a href="iframe.html" class="cartonbox" data-cb-type="iframe" data-cb-fragment="#content">iFrame</a>

8. Add a caption bar to the modal window using the data-cb-caption attribute.

<a href="image.jpg" class="cartonbox" data-cb-type="img" data-cb-caption="Caption Text Here">Image</a>

9. Initialize the jQuery cartonbox on document ready. Done.

$(function() {
  $.cartonbox();
});

10. Available plugin options.

$.cartonbox({
  wrap:        'body',
  speed:       200,
  nav:         'dotted', // false = disable
  cycle:       false, // infinite loop
  preload:     true,
  historyPush: false, // enable url history
  closeHtml:   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><polygon points="24.4,1.4 23.6,0.6 12.5,11.8 1.4,0.6 0.6,1.4 11.8,12.5 0.6,23.6 1.4,24.4 12.5,13.2 23.6,24.4 24.4,23.6 13.2,12.5"></polygon></svg>',
  prevHtml:    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 55"><polygon points="23.7,54.3 24.6,53.7 1.5,26.5 24.6,1.3 23.7,0.7 0.3,26.5"></polygon></svg>',
  nextHtml:    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 55"><polygon points="1.4,54.3 0.6,53.7 23.1,26.5 0.6,1.3 1.4,0.7 24.3,26.5"></polygon></svg>',
});

12. You can also pass the options via the data-cb-options attribute.

<a href="image.jpg" class="cartonbox" data-cb-type="img" data-cb-group="myGroup" data-cb-options="{option: value}">Image</a>

13. Available callback functions.

$.cartonbox({
  onStartBefore:  function() {},
  onStartAfter:   function() {},
  onLoadBefore:   function() {},
  onLoadAfter:    function() {},
  onShowBefore:   function() {},
  onShowNow:      function() {},
  onShowAfter:    function() {},
  onClosedBefore: function() {},
  onClosedAfter:  function() {},
  onLeft:         function() {},
  onRight:        function() {}
});

---

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