The classic modal component with graceful spacings across devices and viewports, using the semantic HTML tag
Modals are built with
<dialog> as a wrapper and
<article> for the modal content.
<a class="close"> is defined to
float: right; allowing a close icon to be top aligned with a title.
<dialog open> <article> <header> <Link to="#" aria-label="Close" class="close" /> <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>
<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 className="secondary"> Cancel </button> <button>Confirm</button> </footer> </article> </dialog>
Toggle a modal by clicking the button below.
To open a modal, add the
open attribute to the
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.