Components

Modal

The classic modal component with graceful spacings across devices and viewports, using the semantic HTML tag <dialog>.

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:

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