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


	<div class="image_single">
		<div class="card_img">
			<img class="img-full" src="path/to/img" alt="Card image">
			<div class="hover-overlay effect-transformY">
				<a href="assets/img/about/team1.jpg" class="overlay_icon" data-lightbox="roadtrip"><i class="fa fa-eye"></i></a>
			</div>
		</div>
	</div>
how to use

lightbox is a jquery plugin which also works like modal. Here's how to use it.

  • Embed lightbox css and js file. 
    
	<link href="path to/lightbox.min.css" rel="stylesheet">
	<script src="path to/lightbox.min.js"></script>
  • Then call the lighbox bt data arrtibute like this data-lightbox="roadtrip"
  • You can add option from your js file. Here's how 
    
	lightbox.option({
	  'resizeDuration': 100,
	  'wrapAround': true
	})

Example

Open demo