Modals

For more details, see Remodal Documentation⟶

Show Modal

HTML

<main class="remodal-bg remodal-is-closed">
	...
	<a href="#" class="btn btn-primary" data-remodal-target="modal">Show Modal
	</a>
	...
</main>
<div class="remodal" data-remodal-id="modal">
	<button class="remodal-close" data-remodal-action="close"></button>
	<h4>Modal done right</h4>
	<p>Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.</p><br>
	<button class="btn btn-sm btn-primary mr-3" data-remodal-action="confirm">Awesome</button>
	<button class="btn btn-sm btn-outline-danger" data-remodal-action="cancel">Cancel</button>
</div>

JavaScript

<script src="assets/lib/remodal/remodal.js"></script>

CSS

<link href="assets/lib/remodal/remodal.css" rel="stylesheet"/>
<link href="assets/lib/remodal/remodal-default-theme.css" rel="stylesheet"/>

Modal Video

Youtube Vimeo

HTML

<a class="video-modal btn btn-primary" href="https://www.youtube.com/watch?v=c8aFcHFu8QM" data-start="16" data-end="168">Youtube Light Box</a>
<a class="video-modal btn btn-primary" href="https://vimeo.com/58558497" data-start="34" data-end="345">Vimeo Light Box</a>