Псевдоелемент 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: сива;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
