jQuery Plugin For Multi functional Bootstrap Modal Modal Extras - Download jQuery Plugin For Multi-functional Bootstrap Modal - Modal Extras

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

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Multi-functional Bootstrap Modal – Modal Extras, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <link rel="stylesheet" href="css/modal-extras.css">
2 <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.

view source
01 <a href="#"
02   data-toggle="modal"
03   data-target="#target-element">
04   Open
05 </a>
06  
07 <div id="target-element" class="modal fade" aria-hidden="true" style="display: none;">
08   <div class="modal-dialog">
09     <div class="modal-btn-close btn-close" data-dismiss="modal"></div>
10     <div class="modal-content">
11       <div class="modal-header">
12         <h3 class="modal-title">Modal title</h3>
13       </div>
14       <div class="modal-body">
15         <p>Modal body</p>
16       </div>
17       <div class="modal-footer">
18         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
19         <button type="button" class="btn btn-primary">Save changes</button>
20       </div>
21     </div>
22   </div>
23 </div>

3. Create a button to toggle an image lightbox

view source
1 <a href="1.jpg"
2    data-toggle="modal-image">
3    Open
4 </a>

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

view source
01 <a href="https://vimeo.com/74980365"
02    data-key="74980365"
03    data-source="Vimeo"
04    data-toggle="modal-video">
05    Open
06 </a>
07  
08 <a href="https://www.youtube.com/watch?v=YZKZuWELJ2I"
09    data-key="YZKZuWELJ2I"
10    data-source="youtube"
11    data-toggle="modal-video">
12    Open
13 </a>

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

view source
1 <a href="ajax.html"
2    data-toggle="modal-ajax">
3    Open
4 </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.

source : jqueryscript.net

Related posts: