Modal box
Modals load and display important information without navigating away from the current page. The user cannot perform other actions until the modal is dismissed. Related design guidelines: Modal
ExamplesDocumentationCSS VariablesExamples
Basic
Modal title
To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.
Small
Modal title
Static text describing modal purpose. 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.
Large
Modal title
Static text describing modal purpose. 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.
Without title
When static text describing the modal is available, it can be wrapped with an ID referring to the modal's aria-describedby value. 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.
With description
Modal title
A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.
To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.
Documentation
Overview
A modal box is a generic rectangular container that can be used to build modals. A modal box can have four sections: title, description, body, and footer. Title or body is required. Alternatively, no sections can be used, and the modal will just serve as a box with no padding for custom modal content. If no .pf-c-modal-box__title is used, aria-label="[title of modal]" must be provided for .pf-c-modal-box.
Accessibility
| Attribute | Applies to | Outcome |
|---|---|---|
role="dialog" | .pf-c-modal-box | Identifies the element that serves as the modal container. Required |
aria-labelledby="[id value of .pf-c-title]" | .pf-c-modal-box | Gives the modal an accessible name by referring to the element that provides the dialog title. Required when .pf-c-title is present |
aria-label="[title of modal]" | .pf-c-modal-box | Gives the modal an accessible name. Required when .pf-c-title is not present |
aria-describedby="[id value of applicable content]" | .pf-c-modal-box | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
aria-modal="true" | .pf-c-modal-box | Tells assistive technologies that the windows underneath the current modal are not available for interaction. Required |
aria-label="Close" | .pf-c-modal-box__close .pf-c-button | Provides an accessible name for the close button as it uses an icon instead of text. Required |
aria-hidden="true" | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with .pf-c-modal-box must not be a descendent of the element with aria-hidden="true". For more info see trapping focus. Required |
Usage
| Class | Applied | Outcome |
|---|---|---|
.pf-c-modal-box | <div> | Initiates a modal box. Required |
.pf-c-button.pf-m-plain | <button> | Initiates a modal box close button. Required |
.pf-c-modal-box__title | <h1>,<h2>,<h3>,<h4>,<h5>,<h6>, <div> | Initiates a modal box title. |
.pf-c-modal-box__description | <div> | Initiates a modal box description. A modal title and modal body are required if using a modal description. |
.pf-c-modal-box__body | <div> | Initiates a modal box body. A modal box body is required if there is no modal box title. |
.pf-c-modal-box__footer | <footer> | Initiates a modal box footer. |
.pf-m-sm | .pf-c-modal-box | Modifies for a small modal box width. |
.pf-m-lg | .pf-c-modal-box | Modifies for a large modal box width. |
CSS Variables
| .pf-c-modal-box | --pf-c-modal-box--BackgroundColor | #fff | ||
| .pf-c-modal-box | --pf-c-modal-box--BoxShadow | 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1) | ||
| .pf-c-modal-box | --pf-c-modal-box--ZIndex | 500 | ||
| .pf-c-modal-box | --pf-c-modal-box--Width | 100% | ||
| .pf-c-modal-box | --pf-c-modal-box--MaxWidth | calc(100% - 2rem) | ||
| .pf-c-modal-box | --pf-c-modal-box--m-sm--sm--MaxWidth | 35rem | ||
| .pf-c-modal-box | --pf-c-modal-box--m-lg--lg--MaxWidth | 70rem | ||
| .pf-c-modal-box | --pf-c-modal-box--MaxHeight | calc(100% - 3rem) | ||
| .pf-c-modal-box | --pf-c-modal-box__title--LineHeight | 1.3 | ||
| .pf-c-modal-box | --pf-c-modal-box__title--FontSize | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__title--PaddingTop | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__title--PaddingRight | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__title--PaddingLeft | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__title--last-child--PaddingBottom | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__description--PaddingTop | 0.25rem | ||
| .pf-c-modal-box | --pf-c-modal-box__description--PaddingRight | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__description--PaddingLeft | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__description--last-child--PaddingBottom | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__body--MinHeight | calc(1rem * 1.5) | ||
| .pf-c-modal-box | --pf-c-modal-box__body--PaddingTop | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__body--PaddingRight | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__body--PaddingLeft | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__body--last-child--PaddingBottom | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__title--body--PaddingTop | 1rem | ||
| .pf-c-modal-box | --pf-c-modal-box__description--body--PaddingTop | 1rem | ||
| .pf-c-modal-box | --pf-c-modal-box--c-button--Top | calc(1.5rem - 0.375rem + 0.0625rem) | ||
| .pf-c-modal-box | --pf-c-modal-box--c-button--Right | 1rem | ||
| .pf-c-modal-box | --pf-c-modal-box--c-button--sibling--MarginRight | 2rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--PaddingTop | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--PaddingRight | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--PaddingBottom | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--PaddingLeft | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--c-button--MarginRight | 1rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--c-button--sm--MarginRight | calc(1rem / 2) | ||
| .pf-c-modal-box__title + .pf-c-modal-box__body | --pf-c-modal-box__body--PaddingTop | 1rem | ||
| .pf-c-modal-box__description + .pf-c-modal-box__body | --pf-c-modal-box__body--PaddingTop | 1rem | ||
