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>

+ +

+ + ${require('./_footer.html')} + +