Pseudo-elementet backdrop

Pseudo-elementet backdrop angiver placering af det angivne element under det allerførste element langs Z-aksen, men over de øvrige elementer. Dette pseudo-element anvendes ofte til at udtykke baggrunden på en side, hvor modale vinduer vises. I dag virker pseudo-elementet backdrop kun med modale vinduer, der er oprettet med elementet <dialog>.

Syntaks

cssselektor::backdrop {
  background: farve til sidebaggrund;
}

Eksempel

Lad os opnå, at når der klikkes på en knap, åbnes et modalt vindue, mens sidebaggrunden er udtykket:

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

Результат:

Se også