Modal

Overview

A simple two-part modal component, with a triggering link and a modal container. Features:

• Will scroll and resize (mobile safe)
• May contain any amount and type of content
• Close button inserted automatically
• Clicking on the blanket (overlay) closes the modal
• Multiple modals allowed on the same page

Options

• data-modal-target - (required) - ID of modal to trigger

Usage

Create a modal container and assign it a unique id. This id will be used to trigger the modal to open.

<div class="modal__dialog" id="unique-id">...</div>

Assign the id to a link by using data-modal-target.

<a data-modal-target="unique-id" href="#">...</a>

Example

Modal content

Modal button

To make the link function like a button assign it the button class.

Nested components

You can nest components inside the modal.

Modal content