Pseudo-elementet backdrop

Pseudo-elementet backdrop angir plassering for det angitte elementet under det aller første elementet langs Z-aksen, men over alle andre elementer. Dette pseudo-elementet brukes ofte for å mørklegge bakgrunnen på siden, der modale vinduer vises. Per i dag fungerer pseudo-elementet backdrop kun med modale vinduer som er opprettet med elementet <dialog>.

Syntaks

cssvelger::backdrop {
  background: farge for bakgrunn på siden;
}

Eksempel

La oss gjøre slik at når knappen trykkes åpnes et modalt vindu, mens bakgrunnen på siden samtidig er mørklagt:

html<button id="open">Åpne</button>
<dialog>
  <form method="dialog">
    <p>Tekst tekst tekst</p>
    <button id="close">Lukk</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: grå;
}

javascriptlet elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Результат:

Se også