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

:

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

- свойство `bottom`,
  которое задает позицию нижнего края элемента
- свойство `top`,
  которое задает позицию верхнего края элемента
- свойство `left`,
  которое задает позицию левого края элемента
- свойство `right`,
  которое задает позицию правого края элемента

← →
↑
en ru