Псевдоелемент backdrop
Псевдоелементът backdrop задава позициониране
на указания елемент под самия първи елемент по оста Z, но над
останалите елементи. Често този псевдоелемент
се използва за затъмняване на фона на страницата, на
който се извеждат модални прозорци.
Към днешна дата псевдоелементът backdrop
работи само с модални прозорци, които са създадени
с помощта на елемента <dialog>.
Синтаксис
селектор::backdrop {
background: цвят за фон на страницата;
}
Пример
Нека направим така, че при натискане на бутон да се отвори модален прозорец, а фонът на страницата при това да бъде затъмнен:
<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());
:
