---
layout: modals
type: component
title: Modals
lead: USAJOBS uses the modal component to draw attention to actions that require user input.
---
Design Complete
Beginning of a dialog window for the [form name] form. It begins with a heading 2
called "[Modal Header]". Escape will cancel and close the window.
[Modal Header]
[modal body content Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.]
Accessibility
Modal should have the role="dialog" attribute.
Content behind the modal should not scroll while the modal is open.
Modal should have an aria-labelledby attribute where the value is the ID of the modal title (you don't need or want the #).
Modal should have an aria-describedby attribute where the value is the ID of a div that contains a description of the modal (you don't need or want the #).
Pressing the ESC key should close the modal and return the focus to the element that triggered the modal.
If the modal contains a form, pressing the Enter key should submit that form.
Usability
When to use
When the focus on the user must be focused on a single, or limited number, of elements. For example, when confirming or canceling a required action.
The flow the user is in would otherwise be interrupted by a distinct page.
Do not use when
Content that must be linkable (have a distinct URL) or searchable.
The contents of the modal is a form longer than 4 fields.
Guidelines
Retain form input: All data entered into a modal should be retained until the modal is submitted. Thus if a user enters data, dismisses the modal, and then reopens the modal the form data should be populated in the form fields.
When an action is required by the user before they may continue.
When it is necessary to redirect the user to another part of the site.
Guidelines
These modals are simply containers for an alert. Thus the modal should adhere to the guidelines for the appropriate alert.
Modals that manage destructive actions should be triggered by a red, secondary button and should use the error alert style. However, unlike the deafult error alert these modals should allow the user to dismiss them.
Unfortunately, we have a number of these modals and we should excise them as quickly as possible. Content behind these modal has to scroll to support the egregious form lengths on mobile devices.
Usability
When to use
Never. Long forms do not belong in modals.
Guidelines
Do not create new instances of modals that contain long forms.
Retain form input: All data entered into a modal should be retained until the modal is submitted. Thus if a user enters data, dismisses the modal, and then reopens the modal the form data should be populated in the form fields.