dialog
Оновлено: 13.01.2023
Елемент <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 і вікно не виводиться в браузері. |
Для цього елемента доступні універсальні атрибути та події.