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
selector::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:
<button id="open">Open</button>
<dialog>
<form method="dialog">
<p>Text text text</p>
<button id="close">Close</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: grey;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
: