Pseudo-elementi backdrop
Pseudo-elementi backdrop vendos pozicionin
e elementit të specifikuar nën elementin e parë përgjatë boshtit Z, por mbi
elementet e tjerë. Shpesh ky pseudo-element
përdoret për errësimin e sfondit të faqes, në
të cilin shfahen dritaret modale.
Deri më sot, pseudo-elementi backdrop
funksionon vetëm me dritaret modale që janë krijuar
duke përdorur elementin <dialog>.
Sintaksa
përzgjedhësi::backdrop {
background: ngjyrë për sfondin e faqes;
}
Shembull
Le ta bëjmë që kur të klikohet butoni të hapet një dritare modale, ndërsa sfondi i faqes në këtë rast të jetë i errësuar:
<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());
:
