Псевдоэлемент backdrop

Псевдоэлемент backdrop задает расположение указанному элементу ниже самого первого элемента по оси Z, но выше остальных элементов. Часто данный псевдоэлемент применяется для затемнения фона страницы, на котором выводятся модальные окошки. На сегодняшний день псевдоэлемент backdrop работает только с модальными окошками, которыми были созданы с помощью элемента <dialog>.

Синтаксис

cssселектор::backdrop {
  background: цвет для фона страницы;
}

Пример

Давайте сделаем так, чтобы при нажатии кнопки открылось модальное окошко, а фон страницы при этом был затемнен:

html<button id="open">Open</button>
<dialog>
  <form method="dialog">
    <p>Text text text</p>
    <button id="close">Close</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: grey;
}

javascriptlet elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Результат:

Смотрите также