PF Next

Modal Box

ModalBox Basic Example

Preview

<div class="pf-c-modal-box" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
  <div class="pf-c-modal-box__close">
    <button class="pf-c-button pf-m-plain" aria-label="Close">
      <i class="fas fa-times" aria-hidden="true"></i>
    </button>
  </div>
  <header class="pf-c-modal-box__header">
    <h1 class="pf-c-modal-box__header-title" id="modal-title">
      Modal Header
    </h1>
  </header>
  <div class="pf-c-modal-box__body" id="modal-description">
    To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.
  </div>
  <footer class="pf-c-modal-box__footer">
    Modal Footer
  </footer>
</div>

ModalBox Large Example

Preview

<div class="pf-c-modal-box pf-m-lg" role="dialog" aria-modal="true" aria-labelledby="modal-lg-title" aria-describedby="modal-lg-description">
  <div class="pf-c-modal-box__close">
    <button class="pf-c-button pf-m-plain" aria-label="Close">
      <i class="fas fa-times" aria-hidden="true"></i>
    </button>
  </div>
  <header class="pf-c-modal-box__header">
    <h2 class="pf-c-modal-box__header-title" id="modal-lg-title">
      Modal Header
    </h2>
  </header>
  <div class="pf-c-modal-box__body" id="modal-lg-description">
    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.
  </div>
  <footer class="pf-c-modal-box__footer">
    Modal Footer
  </footer>
</div>

ModalBox No Header Example

Preview

<div class="pf-c-modal-box" role="dialog" aria-modal="true" aria-label="Example of a modal without a header" aria-describedby="modal-no-header-description">
  <div class="pf-c-modal-box__close">
    <button class="pf-c-button pf-m-plain" aria-label="Close">
      <i class="fas fa-times" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-modal-box__body">
    <span id="modal-no-header-description">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.</span>    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.
  </div>
  <footer class="pf-c-modal-box__footer">
    Modal Footer
  </footer>
</div>

Documentation

Overview

A modal box is a generic rectangular container that can be used to build modals. A modal box can have three sections: header, body, and footer. Header or body is required. If no pf-c-modal-box__header-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-modal-box__header-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-modal-box__header-title is present
aria-label="[title of modal]" .pf-c-modal-box Gives the modal an accessible name. Required when .pf-c-modal-box__header-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

Usage

Class Applied Outcome
.pf-c-modal-box <div> Initiates a modal box. Required
.pf-c-modal-box__header <header> Initiates a modal box header. A modal box header is required if there is no modal box body.
.pf-c-modal-box__header-title <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Initiates a modal box header title.
.pf-c-modal-box__body <div> Initiates a modal box body. A modal box body is required if there is no modal box header.
.pf-c-modal-box__footer <footer> Initiates a modal box footer.
.pf-c-modal-box__close <div> Initiates a modal box close button container. The close container can be nested as the first item in the modal box. Required
.pf-m-lg .pf-c-modal-box Modifies for a modal box width.