LP6 Style Guide: Modals

Modal Button HTML Code Snippet

					
	<button
		class="button button-primary"
		data-target="#modal-test"
		data-toggle="modal">
		Open Modal
	</button>
					
				

Note that the button has a data-target attribute whose value should match the id of the modal container. Modals also should have the data-toggle="modal" attribute and value.

Modal Container HTML Code Snippet

					
	<div id="modal-test" class="modal hide fade" role="dialog" aria-modal="true" aria-describedby="modal-heading-1">
		<div class="flex flex-panes primary one">
			<div class="panes">
				<div class="pane">
					<h3 class="pane-heading modal-header" id="modal-heading-1">Modal Pane Heading <a class="close" data-dismiss="modal">×</a></h3>
					<div class="pane-body modal-body">
						<p>Modals work in conjunction with the <a href="panes">Pane</a> component. The modal pane body can use any common html elements.</p>
						<h4>Dev jokes</h4>
						<ul class="list-number">
							<li>Think of the children!</li>
							<li>It works on my machine</li>
							<li>Give me a &lt;br&gt;</li>
							<li>It's not a bug, it's a feature</li>
						</ul>
					</div>
					<div class="pane-footer modal-footer">
						<p>Pane Footer buttons below a Pane Footer Paragraph.</p>
						<a class="button button-tertiary">Apply Now</a>
						<a class="button button-primary">Request Info</a>
					</div>
				</div>
			</div>
		</div>
	</div>
					
				

Note that the modal container has a role attribute set to dialog and an aria-modal attribute set to true. Modals also should have the aria-describedby attribute whose value should match the id of the modal's heading element.

General Guidance

Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. They interrupt user workflow by design. They are most effective when a task must be completed before a user can continue. While effective when used correctly, modals should be used sparingly to limit disruption to a user experience.

• Using the “✕” in the upper right-hand corner of the modal
• Pressing the ESC key
• Clicking or touching outside of the modal

The modal is composed of three distinct elements: A header, body, and footer. Components (eg. table, form, buttons) can occupy the full width of the modal.

Header

The header of your modal should mirror the action that launched the modal. Headers must include a close button “✕” in the upper right-hand corner of the modal.

Body

A modal should have minimal body content. Components that may be used in modals include: form fields, text, select, and radio buttons.

Footer

The footer area of a modal typically contains either one or two buttons. Do not include three buttons in the footer of your modal. If you need to include a “help” or other non-primary action, include it as a link in the modal’s body.

Accessibility

To support screen reader users each modal component includes a WAI ARIA role="dialog" and aria-modal="true" so assistive technologies understand that the windows underneath the current dialog are not available for interaction. Accessible descriptions are set based on the content of each modal. Modals that contain static text have the aria-describeby property set on the element with the ARIA role="dialog" to indicate which element describes the primary purpose or message of the dialog.

TBD