Elements
These modular elements can be readily used and customized across pages and in different blocks.
Bootstrap Modal <> show code
<div class=" " id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close push-xs-right" data-dismiss="modal" aria-label="Close">
<i class="fa fa-close"></i>
</button>
<div class="container-fluid modal-item">
all modal contents
</div>
</div>
</div>
</div>
</div>
<div class="modal fade " id="exampleModalLong2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
<div class="modal-dialog modal-lg">
</div>
</div>
How to use
First one is a static modal. Modals are hidden by default.
- To embed in your page use .modal class (see second code example)
- Be sure to set a unique id on the .modal for optional controls, especially if you’re using multiple Modal on a single page.
- You can change the modal pop up window style and position using .modal-dialog class
Example
Static Modal
Working Modal
Fancybox <> show code
<a href="img/elm/el10.jpg" class="btn btn-primary quick_view" data-fancybox="quick-view" data-qw-form="qw-form-1">
Open modal
</a>
<span class="hidden">
<a class="quick_view" data-fancybox="quick-view" href="img/elm/el7.jpg">#2</a>
</span>
<div id="qw-form-1" class="hidden">
Any content ...
</div>
how to use
fancybox is a jquery plugin which also works like modal. Here's how to use it.
- Embed fancybox css and js file.
<link href="path to/fancybox.min.css" rel="stylesheet"> <script src="path to/fancybox.min.js"></script>
- Then call the fancybox at data arrtibute like this data-fancybox="quick-view"
Example
Any Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio assumenda numquam dolor illo praesentium.