^Components Modal

Modals are built with <dialog> as a wrapper and <article> for the modal content.

Inside <header> <button rel="prev"> is defined to float: right; allowing a close icon to be top aligned with a title.

<dialog open>
  <article>
    <header>
      <button aria-label="Close" rel="prev"></button>
      <p>
        <strong>🗓️ Thank You for Registering!</strong>
      </p>
    </header>
    <p>
      We're excited to have you join us for our
      upcoming event. Please arrive at the museum 
      on time to check in and get started.
    </p>
    <ul>
      <li>Date: Saturday, April 15</li>
      <li>Time: 10:00am - 12:00pm</li>
    </ul>
  </article>
</dialog>

Inside <footer>, the content is right aligned by default.

<dialog open>
  <article>
    <h2>Confirm Your Membership</h2>
    <p>
      Thank you for signing up for a membership!
      Please review the membership details below:
    </p>
    <ul>
      <li>Membership: Individual</li>
      <li>Price: $10</li>
    </ul>
    <footer>
      <button class="secondary">
        Cancel
      </button>
      <button>Confirm</button>
    </footer>
  </article>
</dialog>

Demo#

Toggle a modal by clicking the button below.

Pico does not include JavaScript code. You need to implement your JS to interact with modals.

As a starting point, you can look at the HTMLDialogElement or the advanced examples below:

• Vanilla JavaScript
• React

To open a modal, add the open attribute to the<dialog> container.

Utilities#

Modals come with 3 utility classes.

These classes are not available in the class-less version.

.modal-is-open prevents any scrolling and interactions below the modal.

<!doctype html>
<html class="modal-is-open">
  ...
</html>

.modal-is-opening brings an opening animation.

<!doctype html>
<html class="modal-is-open modal-is-opening">
  ...
</html>

.modal-is-closing brings a closing animation.

<!doctype html>
<html class="modal-is-open modal-is-closing">
  ...
</html>

Edit this page on GitHub

No-JS transitions NEW #

A <dialog> opened with dialog.showModal() fades in and its <article> zooms in, without JS classes. Pico's modal JS (.modal-is-open, .modal-is-opening, .modal-is-closing) still works on top of it.

• dialog.close() closes it at once, as before.
• <dialog open> in markup and non-modal dialog.show() aren't animated.
• Browsers without @starting-style, and reduced motion, open it at once.

dialog:modal {
  transition: opacity var(--pico-transition);

  > article {
    transition: transform var(--pico-transition);
  }
}
@starting-style {
  dialog:modal {
    opacity: 0;

    > article {
      transform: scale(0.96);
    }
  }
}