Pseudo-element backdrop

Het pseudo-element backdrop specificeert de plaatsing van het opgegeven element onder het allereerste element op de Z-as, maar boven de overige elementen. Dit pseudo-element wordt vaak gebruikt om de achtergrond van de pagina te dimmen, waarop modale vensters worden weergegeven. Momenteel werkt het pseudo-element backdrop alleen met modale vensters die zijn gemaakt met het element <dialog>.

Syntaxis

cssselector::backdrop {
  background: kleur voor paginachtergrond;
}

Voorbeeld

Laten we ervoor zorgen dat wanneer er op een knop wordt geklikt, een modaal venster opent en de paginachtergrond ondertussen wordt gedimd:

html<button id="open">Open</button>
<dialog>
  <form method="dialog">
    <p>Tekst tekst tekst</p>
    <button id="close">Sluiten</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());

Результат:

Zie ook