<dialog> - HTML елемент діалогового вікна

HTML-елемент <dialog> представляє діалогове вікно або інший інтерактивний компонент, такий як інспектор або вікно, яке потрібно закрити.

Елемент <dialog> дозволяє створювати модальні та немодальні діалогові вікна. За замовчуванням, діалогове вікно приховане і може бути показано за допомогою JavaScript методів show() (немодальне) або showModal() (модальне).

Коли діалогове вікно відкривається за допомогою showModal(), воно відображається поверх іншого вмісту сторінки, і взаємодія з елементами поза діалоговим вікном блокується до його закриття.

Закрити діалогове вікно можна за допомогою JavaScript (наприклад, методом close()) або натисканням клавіші Escape, якщо воно модальне.

<dialog>
  <p>Я - діалогове вікно!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

<button id="openDialog">Відкрити діалог</button>

<dialog id="dialog">
  <h2>Це діалогове вікно</h2>
  <p>Ви можете закрити його, натиснувши кнопку або Escape.</p>
  <form method="dialog">
    <button id="closeDialog">Закрити</button>
  </form>
</dialog>

const openButton = document.getElementById('openDialog');
const closeButton = document.getElementById('closeDialog');
const dialog = document.getElementById('dialog');

openButton.addEventListener('click', () => {
  dialog.showModal();
});

closeButton.addEventListener('click', () => {
  dialog.close();
});

dialog {
  border: none;
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}