CSS Components / Modals

Modals

This component has been deprecated

See the Modal component in Garden's @zendeskgarden/react-modals package for the latest updates.

Use .c-dialog component classes for styling modal dialogs.

Dialog

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 .c-dialog Dialog

Large Dialog

The large dialog modification affects the dialog footer and sets a larger dialog width.

Open .c-dialog.c-dialog--large Dialog

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

.c-dialog__close

.c-dialog__close.is-hovered

.c-dialog__close.is-focused

Title layouts

Default .c-dialog__header Title

Danger .c-dialog__header.c-dialog__header--danger Title

Animation

Refine the display of modal dialogs by adding .is-visible to the backdrop and .is-open to the dialog itself.

Playground