PF Next

Modal Upgrade Examples

Patternfly 3 Modal

Preview

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">
        <span class="pficon pficon-close"></span>
      </button>
      <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
    </div>
    <div class="modal-body">
      Modal Body
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      <button type="button" class="btn btn-primary">Save</button>
    </div>
  </div>
</div>

Patternfly 4 Modals

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>

Documentation

Overview

These examples highlight the differences in implementing Modals in Patternfly 4 compared with Patternfly 3. When converting PatternFly 3 components to PatternFly 4 components, you must also take into consideration the layouts and sizings that PatternFly 3 utilized from Bootstrap 3.

Usage

PF3 Class Applied To PF4 Class Applied To Outcome
.modal-dialog <div> -- -- Initiaties a modal dialog.
.modal-content <div> .pf-c-modal-box <div> Initiaties a modal box. Required.
.modal-header <div> .pf-c-modal-box__header <header> Initiaties a modal box header. A modal box header is required if there is no modal box body.
.modal-title <h4> .pf-c-modal-box__header-title <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Initiates a modal box header title.
.modal-body <div> .pf-c-modal-box__body <div> Initiates a modal box body. A modal box body is required if there is no modal box header.
.modal-footer <div> .pf-c-modal-box__footer <footer> Initiates a modal box footer.
.close <button> .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
Main Differences in pf3 Main differences in pf4
Modals have a modal-dialog class. --