PF Next

Modal Demo

Modal Demo

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-backdrop">
  <div class="pf-l-bullseye">
    <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 Dialog">
          <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">
          Overwrite existing file?
        </h1>
      </header>
      <div class="pf-c-modal-box__body" id="modal-description">
        <p>general_modal_final_finalfinal_v9_actualfinal.sketch</p>
        <p>A file with this name already exists, would you like to overwrite the existing file or save a new copy?</p>
      </div>
      <footer class="pf-c-modal-box__footer">
        <button class="pf-c-button">
          Save a copy
        </button>
        <button class="pf-c-button pf-m-primary">
          Overwrite
        </button>
      </footer>
    </div>
  </div>
</div>

Modal Demo - Content long enough to scroll

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-backdrop">
  <div class="pf-l-bullseye">
    <div class="pf-c-modal-box" role="dialog" aria-modal="true" aria-labelledby="modal-scroll-title" aria-describedby="modal-scroll-description">
      <div class="pf-c-modal-box__close">
        <button class="pf-c-button pf-m-plain" aria-label="Close Dialog">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <header class="pf-c-modal-box__header">
        <h1 class="pf-c-modal-box__header-title" id="modal-scroll-title">
          This header text is long and will wrap. This text will be truncated when the viewport height or width is limited. To see this in action, reduce the height and/or width of the viewport.
        </h1>
      </header>
      <div class="pf-c-modal-box__body" id="modal-scroll-description">
        <p>general_modal_final_finalfinal_v9_actualfinal.sketch</p>
        <p>A file with this name already exists, would you like to overwrite the existing file or save a new copy?</p>
        <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Integer tincidunt. Integer tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <p>Duis leo. Praesent blandit laoreet nibh. Ut a nisl id ante tempus hendrerit. Maecenas nec odio et ante tincidunt tempus. Ut a nisl id ante tempus hendrerit. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget,
          diam. Praesent turpis. Phasellus accumsan cursus velit. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Cras ultricies mi eu turpis hendrerit fringilla. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim
          dolor, a pretium mi sem ut ipsum.</p>
        <p>Etiam sit amet orci eget eros faucibus tincidunt. Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Nunc nec neque.</p>
        <p>Ut a nisl id ante tempus hendrerit. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Praesent turpis. Phasellus accumsan cursus velit. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
          metus. Cras ultricies mi eu turpis hendrerit fringilla. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.</p>
        <p>Etiam sit amet orci eget eros faucibus tincidunt. Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Nunc nec neque.
        </p>
      </div>
      <footer class="pf-c-modal-box__footer">
        <button class="pf-c-button">
          Save a copy
        </button>
        <button class="pf-c-button pf-m-primary">
          Overwrite
        </button>
      </footer>
    </div>
  </div>
</div>

Modal Demo - Large

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-backdrop">
  <div class="pf-l-bullseye">
    <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 Dialog">
          <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-lg-title">
          This header text is long and will wrap. This text will be truncated when the viewport height or width is limited. To see this in action, reduce the height and/or width of the viewport.
        </h1>
      </header>
      <div class="pf-c-modal-box__body">
        <p id="modal-lg-description">The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-c-modal-box__body"</p>
        <p>Form here</p>
      </div>
      <footer class="pf-c-modal-box__footer">
        <button class="pf-c-button">
          Cancel
        </button>
        <button class="pf-c-button pf-m-primary">
          Save
        </button>
      </footer>
    </div>
  </div>
</div>

Documentation

This demo implements a basic modal, including the backdrop. Both the normal and large variations of the modal are shown.