Modals

These modular elements can be readily used and customized in every layout across pages.

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

YoutubeVimeo
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>

Modal done right

No matter the task, the new Sparrow is up to it — and even more. See for your self — the pre-made pages, inspired by world's finest websites, are all made with Sparrow. And this is only a tip of the iceberg of what you can do with Sparrow.