Modals

# Intro

Modals are displayed on top of the page content to notify the user of a status or action. Modals are pure CSS and use no JavaScript. Modals are open and closed by using lables and checkboxes. If you use a label with a for that matches the checkbox as the overlay then clicking the overlay will close the modal.

Simple Modal

<input class="modal-toggle" id="modal-simple" type="checkbox"/>
<label class="button" for="modal-simple">Simple Modal</label>
<div class="modal">
	<label class="overlay" for="modal-simple"></label>
	<div class="dialog">
		<label class="close" for="modal-simple"><i class="lni lni-close"></i></label>
		<div class="content">
			...
		</div>
	</div>
</div>

# Headers

Modals can have header elements.

Modal With Header

<input class="modal-toggle" id="modal-header" type="checkbox"/>
<label class="button" for="modal-header">Modal With Header</label>
<div class="modal">
	<label class="overlay" for="modal-header"></label>
	<div class="dialog">
		<label class="close" for="modal-header"><i class="lni lni-close"></i></label>
		<header>
			HEADER
		</header>
		<div class="content">
			...
		</div>
	</div>
</div>

# Footers

Modals can have footer elements.

Modal With Footer

<input class="modal-toggle" id="modal-footer" type="checkbox"/>
<label class="button" for="modal-footer">Modal With Footer</label>
<div class="modal">
	<label class="overlay" for="modal-footer"></label>
	<div class="dialog">
		<label class="close" for="modal-footer"><i class="lni lni-close"></i></label>
		<div class="content">
			...
		</div>
		<footer>
			FOOTER
		</footer>
	</div>
</div>

# Actions

Modals can have an actions classed element added to create flexed and bordered anchors or button groups.

Modal With Action

<input class="modal-toggle" id="modal-4" type="checkbox"/>
<label class="button" for="modal-4">Modal With Action</label>
<div class="modal">
	<label class="overlay" for="modal-4"></label>
	<div class="dialog">
		<label class="close" for="modal-4"><i class="lni lni-close"></i></label>
		<div class="content">
			...
		</div>
		<div class="actions">
			<a href="">Action</a>
			<a href="">Action</a>
			<button class="primary">Action</button>
		</div>
	</div>
</div>

# Colors

Modals have color modifiers available with -primary, -success, -warning, -danger, -dark, and -light.

Primary

Success

Warning

Danger

Dark

Light

<input class="modal-toggle" id="modal-primary" type="checkbox"/>
<label class="button" for="modal-primary">Primary</label>
<div class="modal -primary">
	<label class="overlay" for="modal-primary"></label>
	<div class="dialog">
		<label class="close" for="modal-primary"><i class="lni lni-close"></i></label>
		<header>
			PRIMARY
		</header>
		<div class="content">
			...
		</div>
		<div class="actions">
			<a href="">Action</a>
			<a href="">Action</a>
			<button class="-success">Action</button>
		</div>
	</div>
</div>

# Scrollable

Modals have a max-height and are scrollable on overflow when content doesn't fit.

Scrollable Modal

<input class="modal-toggle" id="modal-5" type="checkbox"/>
<label class="button" for="modal-5">Scrollable Modal</label>
<div class="modal">
	<label class="overlay" for="modal-5"></label>
	<div class="dialog">
		<label class="close" for="modal-5"><i class="lni lni-close"></i></label>
		<header>
			HEADER
		</header>
		<div class="content">
			...
		</div>
		<footer>
			FOOTER
		</footer>
	</div>
</div>

# Sizing

Modals can be sized using the -small, -normal, -medium, and -large modifiers on the dialog element.

Small Modal

Normal Modal

Medium Modal

Large Modal

<input class="modal-toggle" id="modal-6" type="checkbox"/>
<label class="button" for="modal-6">Small Modal</label>
<div class="modal">
	<label class="overlay" for="modal-6"></label>
	<div class="dialog -small">
		...
	</div>
</div>

Modals can be used as a lightbox by using the -lightbox modifier on the modal class. Construct the modal as normal but the only element in the content should be an image. To make a lightbox completely responsive you should also add the -portrait or -landscape modifier.

Lightbox

<input class="modal-toggle" id="modal-lightbox" type="checkbox" />
<label class="button" for="modal-lightbox">Lightbox</label>
<div class="modal -lightbox -landscape">
	<label class="overlay" for="modal-lightbox"></label>
	<div class="dialog">
		<label class="close" for="modal-lightbox"><i class="lni lni-close"></i></label>
		<div class="content">
			<img src="/images/placeholder.png">
		</div>
	</div>
</div>

# Caveats

While no JavaScript is required to use modals, there are a few things to consider:

If multiple labels are used to open the same modal then they must all share the same parent. If there are multiple labels that open their own modals then they each need their own parent.
Modals cannot prevent the body or page from scrolling behind it, but ASH has a built-in helper. You can add/toggle the noscroll class on the body. This can be done with some JavaScript that will be called once the page is fully loaded:

var modalToggles = document.querySelectorAll('.modal-toggle')

for(var i=0; i<modalToggles.length; i++) {
	modalToggles[i].addEventListener('change', function() {
		document.body.classList.toggle('noscroll')
	})
}

Modals

On this page