Modal Overlay

Modal Overlay

The Modal Overlay pattern provides a way to quickly load and display important information to the user without navigating away from the current page. Use cases for Modal Overlays can vary a great deal, but some examples include the following:

  • To collect data from users
  • To remind or prompt users
  • To load dialogs that require user input before advancing
  • To load tasks which require a user’s full attention, such as stepping through a wizard flow
  • To present important information or warnings

For specialized examples of the Modal Overlay, jump to the Wizard or the About Modal patterns. For use cases that do not require a user’s full attention, consider using the Modeless Overlay pattern. With the Modeless Overlay, the background is still accessible so users can interact with the rest of the page.

Image of Overlay

Modal Overlay

Image of Overlay 3

  1. Title (optional): There should be a title bar spanning the top of the modal with a title in the top left corner. The title should be descriptive enough to convey the purpose of the modal while remaining concise. The title may match the action button or link that prompted the overlay modal to appear.

  2. Close: The pficon-close icon should always be available in the top right corner to close the modal overlay.

  3. Panel:
    • The panel should be animated to transition down from the top of the page
    • The panel should sit below the masthead
    • The panel should be centered with a maximum width
    • The panel height can vary depending on the content
    • There should be at least 20px of padding on the right and left side of the panel
    • There should be at least 50px of padding on the bottom of the panel
    • The panel should have a scroll bar if scrolling is needed to display all of the content

  4. Buttons: Action buttons should be right aligned with the primary action as the right most button.

  5. Background: When the modal overlay appears, the background should darken to bring attention to the primary content. While the rest of the page is no longer accessible, the background should still be legible to remain in context for the user.

Short Example

Image of Overlay 2

Long Example

Image of Overlay 3

PatternFly Core Example


Multi-Field

Reference Markup

<button class="btn btn-default" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-3 control-label" for="textInput">Field One</label>
            <div class="col-sm-9">
              <input type="text" id="textInput" class="form-control"></div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label" for="textInput2">Field Two</label>
            <div class="col-sm-9">
              <input type="text" id="textInput2" class="form-control"></div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label" for="textInput3">Field Three</label>
            <div class="col-sm-9">
              <input type="text" id="textInput3" class="form-control">
            </div>
          </div>
        </form>
      </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>
</div>