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.
.modal-is-opening brings an opening animation.
.modal-is-closing brings a closing animation.