MODALS

Autoload Modal - Load modal on page load

<!-- 
	MODAL ON LOAD 
	
	data-autoload="true" 			- load modal on page load
	data-autoload-delay="2000"		- load after 2000 ms (1000ms = 1s)
	
	Please note, an unique ID is required.
	localstorage use the ID to hide the modal, if used checked "Don't show this popup again"
-->
<div id="REQUIRED-ID" class="modal fade" data-autoload="true" data-autoload-delay="2000">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">

			<!-- Modal Header -->
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			</div><!-- /Modal Header -->

			<!-- body modal -->
			<div class="modal-body clearfix">

				<p>
					This is a modal loaded when page load. You can also set a delay - when this modal shows up, after the page is loaded.
				</p>
				<p>
					Please note, an unique ID is required - localStorage is used. <br />
					localStorage use the ID to hide the modal, if user checked "Don't show this popup again".
				</p>

				<!-- Don't show this popup again -->
				<div class="size-11 text-left">
					<label class="checkbox pull-left">
						<input class="loadModalHide" type="checkbox" />
						<i></i> <span class="weight-300">Don't show this popup again</span>
					</label>

				</div>
				<!-- /Don't show this popup again -->

			</div>

		</div>
	</div>
</div>
<!-- /ODAL ON LOAD -->

<!-- Bootstrap Modal >-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Bootstrap Modal
</button>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">

			<!-- Modal Header -->
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			</div>

			<!-- Modal Body -->
			<div class="modal-body">
				<h4>Text in a modal</h4>
				<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

				<h4>Popover in a modal</h4>
				<p>This <a href="#" data-toggle="popover" class="btn btn-default" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

				<h4>Tooltips in a modal</h4>
				<p><a href="#" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-toggle="tooltip" title="Tooltip">that link</a> should have tooltips on hover.</p>
			</div>

			<!-- Modal Footer -->
			<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>



<!-- Modal Ajax Lightbox >-->
<a class="btn btn-default btn-lg lightbox" href="ajax/dummy-lightbox.html" data-lightbox="iframe" data-plugin-options='{"type":"ajax", "closeOnBgClick":false}'>
	Modal Ajax Lightbox</a
>

<!-- Fullwidth Modal >-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-full">Fullwidth modal</button>

<div class="modal fade bs-example-modal-full" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-full">
		<div class="modal-content">

			<!-- header modal -->
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myLargeModalLabel">Fullwidth modal</h4>
			</div>

			<!-- body modal -->
			<div class="modal-body">
				Modal Content Here
			</div>

			<!-- Modal Footer -->
			<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>





<!-- Large Modal >-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">

			<!-- header modal -->
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
			</div>

			<!-- body modal -->
			<div class="modal-body">
				...
			</div>

		</div>
	</div>
</div>





<!-- Small Modal >-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">

			<!-- header modal -->
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
			</div>

			<!-- body modal -->
			<div class="modal-body">
				...
			</div>

		</div>
	</div>
</div>




<!-- Ajax Modal >-->
<a class=" btn btn-primary" href="ajax/dummy-modal-ajax.html" data-target="#ajax" data-toggle="modal">Ajax Modal</a>
<div class="modal fade" id="ajax" role="basic" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">

			<div class="text-center">
				<img src="assets/images/loaders/7.gif" alt="" />
			</div>

		</div>
	</div>
</div>