Modal

The classic modal element with graceful spacings across devices and viewports.

Modals are built with <dialog> as a wrapper and <article> as a content container.

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

<dialog open>
  <article>
    <header>
      <a href="#close" aria-label="Close" class="close"></a>
      Modal title
    </header>
    <p>
      Nunc nec ligula a tortor sollicitudin dictum in vel enim. 
      Quisque facilisis turpis vel eros dictum aliquam et nec turpis. 
      Sed eleifend a dui nec ullamcorper. 
      Praesent vehicula lacus ac justo accumsan ullamcorper.
    </p>
  </article>
</dialog>

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

<dialog open>
  <article>
    <h3>Confirm your action!</h3>
    <p>
      Mauris non nibh vel nisi sollicitudin malesuada. 
      Donec ut sagittis erat. Praesent eu eros felis. 
      Ut consectetur placerat pulvinar.
    </p>
    <footer>
      <a href="#cancel" role="button" class="secondary">Cancel</a>
      <a href="#confirm" role="button">Confirm</a>
    </footer>
  </article>
</dialog>

Live demo

Toggle a modal by clicking the button below.

<!-- Button to trigger the modal -->
<button class="contrast"
  data-target="modal-example"
  onClick="toggleModal(event)">
  Launch demo modal
</button>

<!-- Modal -->
<dialog id="modal-example">
  <article>
    <a href="#close"
      aria-label="Close"
      class="close"
      data-target="modal-example"
      onClick="toggleModal(event)">
    </a>
    <h3>Confirm your action!</h3>
    <p>
      Cras sit amet maximus risus. 
      Pellentesque sodales odio sit amet augue finibus pellentesque. 
      Nullam finibus risus non semper euismod.
    </p>
    <footer>
      <a href="#cancel"
        role="button"
        class="secondary"
        data-target="modal-example"
        onClick="toggleModal(event)">
        Cancel
      </a>
      <a href="#confirm"
        role="button"
        data-target="modal-example"
        onClick="toggleModal(event)">
        Confirm
      </a>
    </footer>
  </article>
</dialog>

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

As a starting point, you can look at this example: modal.js.

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

<!-- Open modal-->
<dialog open>
  <article>
  …
  </article>
</dialog>

<!-- Modal closed -->
<dialog>
  <article>
    …
  </article>
</dialog>

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>