Modal

Modals are great for dialog boxes, confirmation messages, image enlargement and more.

Try example
<a class="button is-primary modal-button" data-target="#modal">Try example</a>

<div class="modal" id="modal">
	<div class="modal-background"></div>
	<div class="modal-body">
		<div class="modal-dialogue">Duis sodales volutpat ex, a consequat justo consectetur quis. Maecenas pharetra diam at nunc rhoncus, id congue magna vehicula. Donec hendrerit, purus non pharetra tempus, tellus ex dictum lacus, vitae suscipit dui justo id urna.</div>
	</div>
	<button class="modal-close"></button>
</div>

Kriyā does not include JavaScript, so you'll have to implement the modal yourself. Call the modal by targeting the modal ID with something like data-target="#modal". Then, to activate the modal just toggle the .is-active class on the modal container.

Modal Card

You can add a more structured card format to your modal, with a header, footer and a scrollable body.

Try card example
<a class="button is-primary modal-button" data-target="#modal-card">Try card example</a>

<div class="modal" id="modal-card">
	<div class="modal-background"></div>
	<div class="modal-card">
		<header class="modal-card-header">
			<h6 class="modal-card-title">Terms of Use</h6>
			<button type="button" class="remove"></button>
		</header>
		<div class="modal-card-body">
			<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
			</div>
		</div>
		<div class="modal-card-footer">
			<a href="" class="button is-success">Accept</a>
			<a href="" class="button">Cancel</a>
		</div>
	</div>
</div>

Modal Image

Add responsive photo enlargements to your article or gallery.

<a class="button is-primary modal-button" data-target="#modal-image">Try image example</a>

<div class="modal" id="modal-image">
	<div class="modal-background"></div>
	<div class="modal-body">
		<figure class="image is-4by3">
			<img src="/path/to/image.jpg" alt="">
		</figure>
	</div>
	<button type="button" class="modal-close"></button>
</div>