Тег <dialog>

Тег <dialog> (укр. — “діалогове вікно”) в HTML використовується для створення нативних модальних або немодальних діалогових вікон. Дає змогу відображати вікна підтвердження, повідомлення, попапи без необхідності створювати складну обгортку через CSS та JavaScript.

Підтримує нативні методи керування: .show(), .showModal(), .close().

Атрибути

Специфічні атрибути

  • open — якщо присутній, елемент буде відображено при завантаженні. Наприклад:
<dialog open>
    Це діалогове вікно.
</dialog>

Глобальні атрибути

Тег <dialog> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<dialog id="myDialog">
    Це модальне вікно.
</dialog>
  • class — для CSS-стилізації. Наприклад:
<dialog class="modal">
    Підтвердження дії.
</dialog>
  • style — для інлайн-стилів. Наприклад:
<dialog style="border: 2px solid #333;">
    Це кастомізоване вікно.
</dialog>
  • title — текстова підказка (практично не використовується для діалогів). Наприклад:
<dialog title="Важливе повідомлення">
    Будь ласка, уважно прочитайте.
</dialog>
  • lang — вказує мову вмісту. Наприклад:
<dialog lang="uk">
    Привіт, це діалог.
</dialog>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання dialog</title>
    <style>
        dialog {
            padding: 20px;
            border: 2px solid #4CAF50;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        button {
            margin-top: 20px;
        }
    </style>
</head>
<body>

<h2>Демонстрація dialog:</h2>

<button onclick="document.getElementById('myDialog').showModal()">Відкрити діалог</button>

<dialog id="myDialog">
    <p>Це модальне діалогове вікно.</p>
    <button onclick="document.getElementById('myDialog').close()">Закрити</button>
</dialog>

</body>
</html>

Додаткові моменти

  • Підтримує нативні JS-методи:
    • .show() — відкриття як немодального діалогу.
    • .showModal() — відкриття як модального вікна.
    • .close() — закриття вікна.
  • Підвищує доступність, оскільки браузери автоматично фокусують вміст.
  • Дозволяє створювати прості попапи без сторонніх бібліотек.
  • Може містити будь-який HTML-вміст.
  • За замовчуванням центрований у вікні браузера.
  • Підтримується сучасними браузерами, але в старих версіях IE — не підтримується.
  • Для більшої кросбраузерної підтримки можна використовувати поліфіли (dialog-polyfill).