See the Modal
component in Garden's
package for the latest updates.
component classes for styling modal dialogs.
The default component class is used to style a simple dialog box. Add absolute positioning properties in order to logically associate the dialog with its opener.Open
The large dialog modification affects the dialog footer and sets a larger dialog width.Open
Dialog with Backdrop Layout
Surround modal dialogs with a backdrop to give them visual distinction from page content. The backdrop layout also adds scrolling behavior so that dialog content can be accessed in a small browser window. Note: implementations are expected to toggle "overflow: hidden" on the <html> element in order to prevent scrolling of background content (and potential double scrollbars for both the content and the backdrop). The backdrop may add a listener, as this demo does, that closes the dialog when a user clicks outside the dialog.
Dialog with Centered Backdrop Layout
A backdrop with additional positioning CSS to center it's contents on the page. The dialog retains its centered position until the window shrinks to a small size, at which breakpoints activate to position the dialog to the top and/or side of the viewport. Extend the centered layout with @media queries that reposition wider/longer dialogs used for your particular application.
Various Dialog Layouts
Close button states
Refine the display of modal dialogs by adding
.is-visible to the backdrop and
.is-open to the dialog itself.