Elements


These modular elements can be readily used and customized across pages and in different blocks.


	<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


    <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