Dialog

<esp-dialog>

Used to focus content modally. By default, on large screens the dialog content is centered horizontally near the top of the screen. On small screens, the content always tries to take up the full screen width.

When opened, the dialog:

Moves focus to the first focusable element inside the slotted content (or the dialog container itself if none is found).
Traps focus so that Tab and Shift+Tab cycle only through elements inside the dialog.
Closes when the user presses Escape.
Marks all sibling content as inert to prevent screen reader and keyboard access to the page behind the overlay.
Restores focus to the element that was focused before the dialog was opened.

Slots

<esp-dialog> has a slot:

Default

Place content to show modally in the default slot.

Dialogs work well as containers for complex forms. Picker menus, inputs, and other interactive controls render correctly inside the dialog overlay.

Attributes

<esp-dialog> has the following attributes:

full-screen

full-screen has a default value of false.

If true, the dialog will take up the full screen. On small screens, the dialog will always be full screen.

Methods

<esp-dialog> has the following methods:

toggleOpen

Show or hide the dialog content. When opening, focus moves into the dialog and sibling content is marked inert. When closing, focus is restored to the element that was focused before the dialog opened.

CSS Properties

<esp-dialog> has the following CSS properties:

--esp-color-dialog-bg

The background color of the dialog overlay.

--esp-dialog-bg-opacity

The opacity of the dialog overlay background.