Modals - Patterns - Superfeedr

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:

When we need to focus the user’s attention on a particular topic, we use a modal to take focus away from the rest of the interface.

A link with an href pointing to the ID of the modal element, and the class js-activate-modal applied so that we can attach a JS event handler to it.

Toggle pattern display width

<a class="button  button--raised  button--positive  js-activate-modal" href="#modal_id">Trigger Modal</a>

The modal code itself, include at the end of the page content markup, outside of any containers—they are automatically hidden on load, with JS enabled, as is demonstrated here.

Toggle pattern display width

<section id="modal_id" class="box  box--form  box--modal">
	<header class="box__header">
		<h1 class="box__title">Your Cool Modal</h1>
	</header>
	<div class="box__content">
		<p>This is your cool modal, drawing all attention to itself.</p>

		<p>This is where you’d explain the impact of whatever actions the modal concerns, to make sure the person interacting with it understands fully what they’re getting themselves into.</p>

		<div class="form">
			<div class="form-row  form-row--form-actions">
				<a class="button  button--flat  button--neutral  js-close-modal" href="#">Cancel</a>
				<a class="button button--raised button--negative" href="#action">Modal Action</a>
			</div>
		</div>
	</div>
</section>

An overlay, used to obscure the whole contents of the screen while the modal is loaded.

Toggle pattern display width

<div class="modal__overlay"></div>

A demo of the Modal and Trigger patterns, showcasing how the modal actually loads.

Toggle pattern display width

<a class="button  button--raised  button--positive  js-activate-modal" href="#modal_id">Trigger Modal</a>

<section id="modal_id" class="box  box--form  box--modal">
	<header class="box__header">
		<h1 class="box__title">Your Cool Modal</h1>
	</header>
	<div class="box__content">
		<p>This is your cool modal, drawing all attention to itself.</p>
		<p>This is where you’d explain the impact of whatever actions the modal concerns, to make sure the person interacting with it understands fully what they’re getting themselves into.</p>
	</div>
	<div class="box__footer  form">
		<div class="form-row  form-row--form-actions">
			<a class="button  button--flat  button--neutral  js-close-modal" href="#">Cancel</a>
			<a class="button button--raised button--negative" href="#action">Modal Action</a>
		</div>
	</div>
</section>

Superfeedr Patterns › Modals

Trigger

Modal

Modal overlay

Modal and trigger