Псевдоелемент backdrop
Псевдоелемент backdrop задаје позицију
наведеном елементу испод самог првог елемента по Z оси, али изнад
осталих елемената. Овај псевдоелемент се често
користи за затamрање позадине странице, на
којој се приказују модални прозори.
Данас псевдоелемент 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());
:
