Pseudoelementas backdrop
Pseudoelementas backdrop nurodo, kad elementas turi būti išdėstytas
po pačiu pirmuoju elementu z ašyje, bet virš
visų kitų elementų. Šis pseudoelementas dažnai
naudojamas puslapio fono patamsinimui, ant
kurio atvaizduojami modaliai langai.
Šiuo metu pseudoelementas backdrop
veikia tik su modaliais langais, kurie sukurti
naudojant elementą <dialog>.
Sintaksė
selektorius::backdrop {
background: fonui skirtos spalvos;
}
Pavyzdys
Sukurkime, kad paspaudus mygtuką atsidarytų modalus langas, o puslapio fonas tuo pačiu būtų patamsintas:
<button id="open">Atidaryti</button>
<dialog>
<form method="dialog">
<p>Tekstas tekstas tekstas</p>
<button id="close">Uždaryti</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: pilka;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
