Pseudo-element backdrop
Pseudo-element backdrop zadaje pozicioniranje
navedenom elementu ispod samog prvog elementa na Z osi, ali iznad
ostalih elemenata. Često se ovaj pseudo-element
primenjuje za zatamnjivanje pozadine stranice, na
kojoj se prikazuju modalni prozori.
Na današnji dan pseudo-element backdrop
radi samo sa modalnim prozorima, koji su kreirani
pomoću elementa <dialog>.
Sintaksa
selektor::backdrop {
background: boja za pozadinu stranice;
}
Primer
Hajde da napravimo tako da pri kliku na dugme se otvori modalni prozor, a pozadina stranice pri tome bude zatamnjena:
<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());
:
