HTML таг dialog

Пример

Кратък пример как се използва тагът <dialog>.

<button id="openDialog" class="btn btn-primary">Отвори диалог</button>

<dialog id="exampleDialog">
  <form method="dialog">
    <h2>Заглавие на диалога</h2>
    <p>Това е съдържание в <code>&lt;dialog&gt;</code> елемент.</p>
    <div class="mt-3">
      <button value="cancel" class="btn btn-secondary">Затвори</button>
      <button value="confirm" class="btn btn-primary">Потвърди</button>
    </div>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('exampleDialog');
  const openBtn = document.getElementById('openDialog');

  openBtn.addEventListener('click', () => dialog.showModal());
</script>

Дефиниция и употреба

Виж как се ползва тагът <dialog>.

Елементът <dialog> представлява вграден модален или немодален диалогов прозорец – например модално съобщение, прозорец за потвърждение, форма за вход и др. По подразбиране диалогът е скрит и се показва чрез JavaScript методите show() (немодален) или showModal() (модален, блокира фона). Затваря се с метода close() или автоматично при изпращане на форма с method="dialog". Атрибутът open указва дали диалогът е видим; той се добавя и премахва автоматично при извикване на методите за показване/скриване. Вътре в <dialog> могат да се поставят всякакви HTML елементи – заглавия, текст, форми, бутони. За по-добра достъпност се препоръчва да има ясно заглавие и логичен фокус при отваряне и затваряне на диалога.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути