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.



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.


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.


:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);



Selectors Level 4
# modal-state

Browser compatibility

BCD tables only load in the browser

See also