dialog

HTML5

Оновлено: 03.06.2022

Елемент <dialog> (від англ. dialog - діалог) створює діалогове вікно, в якому можна виводити повідомлення або форму, наприклад, для входу на сайт.

Діалогове вікно відображається з наведеним нижче стилем

position: absolute; left: 0; right: 0; margin: auto; border: solid; padding: 1em; background: white; color: black;

Отже, діалогове вікно відображається з білим фоном, чорною рамкою і по центру горизонтальної осі. Ширина відповідає ширині батьківського контейнера.

Для відображення та вимкнення діалогового вікна застосовуються відповідно методи show() і close(), як показано в прикладі нижче. Крім того, діалог можна перетворити на модальне вікно, використовуючи замість show() метод showModal(). У цьому випадку інші елементи на сторінці блокуються: текст не можна виділити, а кнопки - натиснути, доки діалогове вікно не буде закрито. Також модальне вікно можна закрити клавішеюEsc.

Синтаксис

<dialog open>
...
</dialog>

Закриваючий тег

Обов'язковий.

Атрибути

open Відображає діалогове вікно. Без цього атрибута в стилях до нього дадається display: none і вікно не виводиться в браузері.

Для цього елемента доступні універсальні атрибути та події.

Приклад

Результат цього прикладу показано на рис. 1. При натисканні на кнопку «Відкрити вікно» відображається вміст елемента <dialog>, до цього невидимий. При натисканні на кнопку "Закрити вікно" діалогове вікно - ховається.

Рис. 1. Вид діалогового вікна

Браузери

dialog

Переглянути сумісність з Can I use?

dialog