: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
css
: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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
dialog
element- Other element display state pseudo-classes:
:fullscreen
and:picture-in-picture
- Complete list of pseudo-classes