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

<dialog>

Тег <dialog> (от англ. dialog - диалог) задает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт.

Диалоговое окно отображается со следующим предустановленным стилем.

1
2
3
4
5
6
7
8
position: absolute;
left: 0;
right: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;

Таким образом диалоговое окно отображается с белым фоном, чёрной рамкой и по центру горизонтальной оси. Ширина совпадает с шириной родительского контейнера.

Для отображения и сокрытия диалогового окна применяются, соответственно, методы show() и hide(), как показано в примере ниже. Кроме того, диалог можно превратить в модальное окно, используя вместо show() метод showModal(). В этом случае остальные элементы на странице блокируются — текст нельзя выделить, а кнопки нажать до тех пор, пока диалоговое окно не будет закрыто. Также модальное окно можно закрыть клавишей Esc.

Интерактивные элементы

Поддержка браузерами

Can I Use dialog? Data on support for the dialog feature across the major browsers from caniuse.com.

Полифилы для включения поддержки:

Синтаксис

1
<dialog open>...</dialog>

Закрывающий тег обязателен.

Атрибуты

open

Отображает диалоговое окно. Без этого атрибута в стилях к нему добавляется display: none и окно не выводится в браузере.

open

Отображает диалоговое окно. Без этого атрибута в стилях к нему добавляется display: none и окно не выводится в браузере.

Для этого элемента также доступны универсальные атрибуты.

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

Описание и примеры

Пример 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
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>dialog</title>
        <style>
            body {
                background: url(/example/image/shark.jpg)
                    no-repeat;
                background-size: cover;
            }
            dialog {
                background: rgba(255, 255, 255, 0.7);
                width: 300px;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <button id="openDialog">Открыть окно</button>
        <dialog>
            <p>
                Полинезийцы называют Млечный путь
                Манго-Роа-И-Ата, что в переводе с маори
                означает «Длинная акула на рассвете».
            </p>
            <p>
                <button id="closeDialog">
                    Закрыть окно
                </button>
            </p>
        </dialog>
        <script>
            var dialog = document.querySelector('dialog');
            document.querySelector('#openDialog').onclick =
                function () {
                    dialog.show(); // Показываем диалоговое окно
                };
            document.querySelector('#closeDialog').onclick =
                function () {
                    dialog.close(); // Прячем диалоговое окно
                };
        </script>
    </body>
</html>

Пример 2

1
2
3
<dialog open>
    <p>Greetings, one and all!</p>
</dialog>

Пример 3

 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
<!-- Простой попап диалог с формой -->
<dialog id="favDialog">
    <form method="dialog">
        <section>
            <p>
                <label for="favAnimal"
                    >Favorite animal:</label
                >
                <select id="favAnimal">
                    <option></option>
                    <option>Brine shrimp</option>
                    <option>Red panda</option>
                    <option>Spider monkey</option>
                </select>
            </p>
        </section>
        <menu>
            <button id="cancel" type="reset">Cancel</button>
            <button type="submit">Confirm</button>
        </menu>
    </form>
</dialog>

<menu>
    <button id="updateDetails">Update details</button>
</menu>

<script>
    (function () {
        var updateButton =
            document.getElementById('updateDetails');
        var cancelButton =
            document.getElementById('cancel');
        var favDialog =
            document.getElementById('favDialog');

        // Update button opens a modal dialog
        updateButton.addEventListener('click', function () {
            favDialog.showModal();
        });

        // Form cancel button closes the dialog box
        cancelButton.addEventListener('click', function () {
            favDialog.close();
        });
    })();
</script>

Ссылки

Комментарии