Backdrop псевдоэлементі
backdrop псевдоэлементі көрсетілген элементті
Z осі бойынша ең бірінші элементтен төмен, бірақ басқа
элементтерден жоғары орналастырады. Бұл псевдоэлемент
жиі беттің фонын көлеңдейту үшін қолданылады,
онда модальді терезелер шығады.
Бүгінгі таңда backdrop псевдоэлементі
тек модальді терезелермен жұмыс істейді, олар
<dialog> элементі арқылы жасалған.
Синтаксис
селектор::backdrop {
background: фон түсі;
}
Мысал
Түймені басқан кезде модальді терезе ашылып, беттің фоны сәл көлеңдегенін жасап көрейік:
<button id="open">Ашу</button>
<dialog>
<form method="dialog">
<p>Мәтін мәтін мәтін</p>
<button id="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());
:
