The backdrop pseudo-element

The backdrop pseudo-element positions a specified element below the very first element along the Z-axis, but above the remaining elements. Often this pseudo-element is used to darken the background of the page on which modal windows are displayed. Currently, the backdrop pseudo-element only works with modal windows that were created using the <dialog> element.

Syntax

cssselector::backdrop {
  background: page background color;
}

Example

Let's make sure that when the button is clicked, a modal window opens, and the page background is darkened:

html<button id="open">Open</button>
<dialog>
  <form method="dialog">
    <p>Text text text</p>
    <button id="close">Close</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: grey;
}

javascriptlet elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Результат:

See also