Pseudo-Element backdrop

Das Pseudo-Element backdrop legt die Positionierung für das angegebene Element unter dem allerersten Element auf der Z-Achse fest, aber über allen anderen Elementen. Oft wird dieses Pseudo-Element zum Abdunkeln des Seitenhintergrunds verwendet, auf dem modale Fenster angezeigt werden. Bis heute funktioniert das Pseudo-Element backdrop nur mit modalen Fenstern, die mit dem Element <dialog> erstellt wurden.

Syntax

cssSelektor::backdrop {
  background: Hintergrundfarbe für die Seite;
}

Beispiel

Lassen Sie uns einen Klick auf den Button so einrichten, dass ein modales Fenster geöffnet wird und der Seitenhintergrund dabei abgedunkelt wird:

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());

Результат:

Siehe auch