Awesome jQuery Plugin For Multi-functional Bootstrap Modal – Modal Extras




jquery-plugin-for-multi-functional-bootstrap-modal-modal-extras

Here we will share one Awesome  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.

jquery-plugin-for-multi-functional-bootstrap-modal-modal-extras

How to use Modal Extras:

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>

May you love it!

Leave a Reply

Your email address will not be published. Required fields are marked *