Псевдоэлемент 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());
:
