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
velger::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:
<button id="open">Åpne</button>
<dialog>
<form method="dialog">
<p>Tekst tekst tekst</p>
<button id="close">Lukk</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: grå;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
