jQuery Plugin For Multi-functional Bootstrap Modal - Modal Extras

File Size: 31.5 KB
Views Total: 3538
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Multi-functional Bootstrap Modal - Modal Extras

Modal Extras is a small jQuery plugin to extend and enhance the default Bootstrap's modal component. The plugin allows you to create customizable, AJAX-enabled content / image / video modal popups using Bootstrap's styles and Modal.js.

How to use it:

1. Include the jQuery Modal Extras plugin's stylesheet and JavaScript files in your web project. Make sure you first have jQuery library and Bootstrap framework installed.

<link rel="stylesheet" href="css/modal-extras.css">
<script src="js/modal-extras.js"></script>

2. Create a button to toggle a modal popup that loads data from inline elements within the document.

<a href="#" 
  data-toggle="modal" 
  data-target="#target-element">
  Open
</a>

<div id="target-element" class="modal fade" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-btn-close btn-close" data-dismiss="modal"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Modal title</h3>
      </div>
      <div class="modal-body">
        <p>Modal body</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

3. Create a button to toggle an image lightbox

<a href="1.jpg" 
   data-toggle="modal-image">
   Open
</a>

4. You can also embed Youtube or Vimoe videos into the modal.

<a href="https://vimeo.com/74980365" 
   data-key="74980365" 
   data-source="Vimeo" 
   data-toggle="modal-video">
   Open
</a>

<a href="https://www.youtube.com/watch?v=YZKZuWELJ2I" 
   data-key="YZKZuWELJ2I" 
   data-source="youtube" 
   data-toggle="modal-video">
   Open
</a>

5. Create a button to toggle a modal popup that loads external data sources via AJAX.

<a href="ajax.html" 
   data-toggle="modal-ajax">
   Open
</a>

Change log:

2017-06-08

  • Change bindings to "body" so that they will work with dynamically added content.

2016-11-03

  • Change hidden.bs.modal

2016-07-21

  • Image gallery functionality for a set of modal-image links that all have the same data-gallery attribute value

2016-02-11

  • Adding support for full instagram data to come up in an instagram styled modal

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