Pseudoelemento backdrop

Il pseudoelemento backdrop imposta la posizione dell'elemento specificato sotto il primo elemento lungo l'asse Z, ma sopra tutti gli altri elementi. Spesso questo pseudoelemento viene utilizzato per oscurare lo sfondo della pagina, su cui vengono visualizzate le finestre modali. Ad oggi, il pseudoelemento backdrop funziona solo con le finestre modali create con l'elemento <dialog>.

Sintassi

selettore::backdrop {
	background: colore per lo sfondo della pagina;
}

Esempio

Facciamo in modo che quando si clicca sul pulsante si apra una finestra modale, e lo sfondo della pagina sia oscurato:

<button id="open">Apri</button>
<dialog>
	<form method="dialog">
		<p>Testo testo testo</p>
		<button id="close">Chiudi</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());

Vedi anche

la proprietà bottom,
che imposta la posizione del bordo inferiore dell'elemento
la proprietà top,
che imposta la posizione del bordo superiore dell'elemento
la proprietà left,
che imposta la posizione del bordo sinistro dell'elemento
la proprietà right,
che imposta la posizione del bordo destro dell'elemento