Pseidoelements backdrop
Pseidoelements backdrop norāda izvietojumu
norādītajam elementam zem pirmā elementa pa Z asi, bet virs
pārējiem elementiem. Bieži vien šo pseidoelementu
izmanto lapas fona aptumšināšanai, uz
kura tiek rādīti modālie logi.
Šodien pseidoelements backdrop
strādā tikai ar modālajiem logiem, kas izveidoti
ar elementa <dialog> palīdzību.
Sintakse
selektors::backdrop {
background: krāsa fona lapai;
}
Piemērs
Izveidosim tā, lai, nospiežot pogu, atvērtos modālais logs, un fons lapas tiktu ap tumšināts:
<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());
:
