Елемент <dialog> (від англ. dialog — діалог) створює діалогове вікно, в якому можна виводити повідомлення або форму, наприклад, для входу на сайт.
Діалогове вікно відображається з наступним стилем.
<code data-language="css">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 і вікно не виводиться у браузері.
Для цього елемента також доступні універсальні атрибути та події.
Приклад
<!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>Результат цього прикладу показаний на рис. 1. При натисканні на кнопку «Відкрити вікно» відображається вміст елемента <dialog>, до цього невидимий. При натисканні на кнопку «Закрити вікно» діалогове вікно приховується.
Рис. 1. Вигляд діалогового вікна
Специфікація
| Специфікація | Статус |
|---|---|
| WHATWG HTML Living Standard | Живий стандарт |
| HTML5.1 | Робочий проект |
Специфікація
Кожна специфікація проходить кілька стадій схвалений ія.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Особняком стоїть живий стандарт HTML (Living) — він не дотримується традиційної нумерації версій, оскільки перебуває в постійній розробці та оновлюється регулярно.
Браузери
| 37 | 24 |
| 30 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — елемент повністю підтримується браузером ;
- — елемент браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або елемент підтримується з застереженнями.
Число вказує версію браузреа, починаючи з якої елемент підтримується.