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
selektor::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:
<button id="open">Open</button>
<dialog>
<form method="dialog">
<p>Text text text</p>
<button id="close">Close</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: grey;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
