Dialog Element

Modal dialogs, accessibility, focus management, and the dialog API.

Overview

The <dialog> element provides built-in modal functionality.

Key Concepts

• Modal Dialog — Blocks interaction with page
• showModal() — Open as modal
• show() — Open as non-modal
• close() — Close dialog
• ::backdrop — Style the overlay

Code Examples

<dialog id="myDialog">
  <form method="dialog">
    <h2>Confirm Action</h2>
    <p>Are you sure you want to proceed?</p>
    <div>
      <button value="cancel">Cancel</button>
      <button value="confirm">Confirm</button>
    </div>
  </form>
</dialog>

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

<dialog id="formDialog">
  <form method="dialog">
    <h2>Contact Form</h2>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" required>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" required>
    </div>
    <div>
      <label for="message">Message:</label>
      <textarea id="message" required></textarea>
    </div>
    <div>
      <button type="button" id="cancelForm">Cancel</button>
      <button type="submit" value="submit">Send</button>
    </div>
  </form>
</dialog>

<button id="openForm">Open Form</button>

<script>
const dialog = document.getElementById('myDialog');
const formDialog = document.getElementById('formDialog');

document.getElementById('openDialog').addEventListener('click', () => {
  dialog.showModal();
});

dialog.addEventListener('close', (e) => {
  console.log('Dialog closed with:', dialog.returnValue);
});

document.getElementById('openForm').addEventListener('click', () => {
  formDialog.showModal();
});

document.getElementById('cancelForm').addEventListener('click', () => {
  formDialog.close('cancel');
});

formDialog.addEventListener('close', (e) => {
  if (formDialog.returnValue === 'submit') {
    const formData = new FormData(formDialog.querySelector('form'));
    console.log('Form submitted:', Object.fromEntries(formData));
  }
});
</script>

<style>
dialog {
  border: none;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

dialog[open] {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

Practice

Create accessible modals with focus trapping and keyboard navigation.