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

button {
  display: block;
  margin: auto;
  width: 10rem;
  height: 2rem;
}

:modal {
  background-color: beige;
  border: 2px solid burlywood;
  border-radius: 5px;
}

p {
  color: black;
}

<p>Would you like to see a new random number?</p>
<button id="showNumber">Show me</button>

<dialog id="favDialog">
  <form method="dialog">
    <p>Lucky number is: <strong id="number"></strong></p>
    <button>Close dialog</button>
  </form>
</dialog>

const showNumber = document.getElementById("showNumber");
const favDialog = document.getElementById("favDialog");
const number = document.getElementById("number");

showNumber.addEventListener("click", () => {
  number.innerText = Math.floor(Math.random() * 1000);
  favDialog.showModal();
});

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

Browser compatibility

See also

• dialog element
• Other element display state pseudo-classes: :fullscreen and :picture-in-picture
• Complete list of pseudo-classes