HTML тег `<dialog>`

Значение и применение

Тег <dialog> создаёт диалоговое окно, с которым непосредственно работает пользователь для выполнения определенных действий. Атрибут open активирует диалоговое окно, созданное с помощью этого тега.

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

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

Поддерживается во всех основных браузерах с 2022 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.dialog
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`dialog`	✓37	✓79	✓98	✓24	✓15.4	✓37	✓98	✓24	✓15.4	✓3.0	✓37	✓15.4
`closedby`	✓134	✓134	✓141	✓119	✓preview	✓134	✓141	✓88	×	✓29.0	✓134	×
`open`	✓37	✓79	✓98	✓24	✓15.4	✓37	✓98	✓24	✓15.4	✓3.0	✓37	✓15.4

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`open`	`open`	Указывает, что диалоговый элемент (диалоговое окно) активен/-но и пользователь может с ним взаимодействовать.
`closedby`	`any \| closerequest \| none`	Управляет закрытием пользователем: `any` разрешает также клик снаружи, `closerequest` — запрос закрытия (например Escape), `none` отключает эти способы. Без атрибута модальный диалог использует closerequest, немодальный — none. Поддержка ограничена.

Наличие open, включая open="false", показывает немодальный диалог. Для модального открытия используйте showModal(): браузер помещает диалог в верхний слой и делает остальную страницу неактивной. show() открывает немодально.

Закрывайте через close(), requestClose() либо форму с method="dialog", а не ручным удалением open. Дайте диалогу название, например через aria-labelledby, и понятную кнопку закрытия. Атрибут tabindex на самом <dialog> не допускается.

Примеры, попробуйте сами

Пример использования тега <dialog>

Нажмите ▶. Измените разметку во вкладке HTML и сравните результат.

index.html

HTML

<dialog id="dialog">
  <form method="dialog">
    <p>
      <label for="color">Выбери цвет:</label>
      <select id="color">
        <option></option>
        <option>Красный</option>
        <option>Синий</option>
      </select>
    </p>
    <button id="cancel" type="reset">Отменить</button>
    <button type="submit">Подтвердить</button>
  </form>
</dialog>

<button id="update">Выбрать</button>

main.js

JavaScript

;(function () {
    var updateButton = document.getElementById('update')
    var cancelButton = document.getElementById('cancel')
    var dialog = document.getElementById('dialog')
    updateButton.addEventListener('click', function () {
        dialog.showModal()
    })
    cancelButton.addEventListener('click', function () {
        dialog.close()
    })
})()

document.querySelector('dialog button[type=submit]').addEventListener('click', function (event) {
    event.preventDefault()
    this.closest('dialog').close()
})

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <dialog>