Dialog 🍹 HTMLcat

The <dialog> element is an HTML5 feature that creates a modal or non-modal dialog box. It's useful for creating popups, alerts, or forms that overlay the main content.

<dialog id="dialog">
  <h2>Dialog Title</h2>
  <p>This is the dialog content.</p>
  <button id="closeDialog">Close</button>
</dialog>

<button id="openDialog">Open Dialog</button>

const dialog = document.querySelector('#dialog');
  document.querySelector('#openDialog').onclick = () => dialog.showModal();
  document.querySelector('#closeDialog').onclick = () => dialog.close();