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

cssselettore::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:

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

Результат:

Vedi anche