:modal

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The :modal CSS pseudo-class matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed. Multiple elements can be selected by the :modal pseudo-class at the same time, but only one of them will be active and able to receive input.

Try it

Syntax

:modal {
  /* ... */
}

Usage notes

Examples of elements that will prevent user interaction with the rest of the page and will be selected by the :modal pseudo-class include:

The dialog element opened with the showModal() API.
The element selected by the :fullscreen pseudo-class when opened with the requestFullscreen() API.

Examples

Styling a modal dialog

This example styles a modal dialog that opens when the "Update details" button is activated. This example has been built on top of the <dialog> element example.

CSS

:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}

Result

Specifications

Specification
Selectors Level 4 # modal-state

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`:modal`	105	105	103	91	15.6	105	103	72	15.6	20.0	105