Pseudo-element backdrop
Pseudo-element backdrop määrab määratud elemendi asukoha
allpool kõige esimest elementi piki Z-telge, kuid ülejäänud
elementidest kõrgemal. Sageli kasutatakse seda pseudo-elementi
lehe tausta tumendamiseks, mille peal
kuvatakse modaalaknad.
Tänapäeval töötab pseudo-element backdrop
ainult modaalakendega, mis on loodud
kasutades elementi <dialog>.
Süntaks
valija::backdrop {
background: värv lehe taustaks;
}
Näide
Teeme nii, et nupu vajutamisel avaneks modaalaken, lehe taust oleks samal ajal tumendatud:
<button id="open">Ava</button>
<dialog>
<form method="dialog">
<p>Tekst tekst tekst</p>
<button id="close">Sulge</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());
:
