Перейти к содержанию

::backdrop

Псевдоэлемент ::backdrop отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.

В настоящее время работает только с модальными окнами, созданными с помощью элемента <dialog>.

Псевдо-элементы

Синтаксис

1
2
3
4
/* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() */
dialog::backdrop {
    background: rgba(255, 0, 0, 0.25);
}

Спецификация

Пример 1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>::backdrop</title>
        <style>
            dialog {
                width: 300px;
            }
            dialog::backdrop {
                background: rgba(0, 0, 0, 0.7);
            }
        </style>
    </head>
    <body>
        <button id="openDialog">Вход на сайт</button>
        <dialog>
            <form id="authentication" action="handler.php">
                <p>
                    <input
                        name="login"
                        required
                        autofocus
                        placeholder="Логин"
                    />
                </p>
                <p>
                    <input
                        type="password"
                        name="pass"
                        required
                        placeholder="Пароль"
                    />
                </p>
                <p>
                    <button type="submit">Войти</button>
                    <button id="closeDialog">
                        Закрыть окно
                    </button>
                </p>
            </form>
        </dialog>
        <script>
            var dialog = document.querySelector('dialog');
            document.querySelector(
                '#openDialog'
            ).onclick = function () {
                dialog.showModal();
            };
            document.querySelector(
                '#closeDialog'
            ).onclick = function () {
                dialog.close();
            };
        </script>
    </body>
</html>

Результат:

Затемнение фона под диалоговым окном с помощью ::backdrop

См. также

Ссылки

  • Псевдо-элемент ::backdrop MDN (рус.)

Комментарии