Psevdoelement backdrop
Psevdoelement backdrop berilgan elementni
Z o'qi bo'yicha eng birinchi elementdan pastroqda, lekin
qolgan elementlardan yuqorida joylashuvini belgilaydi. Ko'pincha bu psevdoelement
sahifa fonini qoraytirish uchun qo'llaniladi,
unda modal oynalar ko'rsatiladi.
Bugungi kunda backdrop psevdoelementi
faqat <dialog> elementi yordamida yaratilgan
modal oynalar bilan ishlaydi.
Sintaksis
selector::backdrop {
background: fon uchun rang;
}
Misol
Keling, tugma bosilganda modal ochiladigan va shu bilan birga sahifa fonini qoraytiradigan qilaylik:
<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());
:
