:modal
Baseline 2022Newly 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 theshowModal()
API. - The element selected by the
:fullscreen
pseudo-class when opened with therequestFullscreen()
API.
Examples
Styling a modal dialog
Result
Specifications
Specification |
---|
HTML # selector-modal |
Selectors Level 4 # selectordef-modal |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:modal |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
See also
dialog
element- Other element display state pseudo-classes:
:fullscreen
and:picture-in-picture
- Complete list of pseudo-classes