Open navigation menu

Native Dialog Element

Uses the HTML dialog element to create modal and non-modal dialogs with built-in focus management, backdrop, and JavaScript API.

HtmlForm Validation

Code

snippet
<!-- Modal dialog -->
<dialog id="modal" aria-labelledby="modal-title">
  <form method="dialog">
    <h2 id="modal-title">Confirm Action</h2>
    <p>Are you sure you want to proceed?</p>
    <menu>
      <button value="cancel">Cancel</button>
      <button value="confirm" autofocus>Confirm</button>
    </menu>
  </form>
</dialog>

<!-- Non-modal dialog -->
<dialog id="popup">
  <p>This is a non-modal popup.</p>
  <button onclick="document.getElementById('popup').close()">Close</button>
</dialog>

<button onclick="document.getElementById('modal').showModal()">
  Open Modal
</button>

<button onclick="document.getElementById('popup').show()">
  Open Popup
</button>

<style>
  dialog {
    border: none;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 90vw;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  }
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
  }
</style>

<script>
  const modal = document.getElementById('modal');
  modal.addEventListener('close', () => {
    console.log('Dialog result:', modal.returnValue);
  });
</script>

Related Examples