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="fs-11 text-left">

					<label class="checkbox float-left">

						<input class="loadModalHide" type="checkbox" />

						<i></i> <span class="fw-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" data-trigger="focus" 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/_smarty/loaders/7.gif" alt="" />

			</div>



		</div>

	</div>

</div>