Modals

Nirvana gives you the modal which is responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window with declarative configuration and hash tracking. Detail documentation ⟶

JavaScript

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

CSS

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

HTML

<main class="remodal-bg remodal-is-closed">
	...
	<a href="#" class="btn btn-primary color-white" 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>

Modal Video

HTML

<a class="video-modal btn btn-primary color-white" 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 color-white" href="https://vimeo.com/58558497" data-start="34" data-end="345">Vimeo Light Box</a>