<dialog>

Syntax

<dialog id="myDialog">
  <p>Dialog content</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>

Examples

<dialog id="confirmDialog">
  <p>Are you sure you want to delete this item?</p>
  <button onclick="document.getElementById('confirmDialog').close()">Cancel</button>
  <button onclick="document.getElementById('confirmDialog').close()">Delete</button>
</dialog>
<button onclick="document.getElementById('confirmDialog').showModal()">Delete Item</button>

<dialog id="tipDialog">
  <p>Tip: You can use keyboard shortcuts to navigate faster.</p>
</dialog>
<script>
  document.getElementById("tipDialog").show();
</script>

<dialog style="border: none; border-radius: 12px; padding: 24px; max-width: 400px;">
  <h3>Settings</h3>
  <p>Dialog content goes here.</p>
</dialog>
<style>
  dialog::backdrop { background: rgba(0,0,0,0.5); }
</style>

Attributes

• open (boolean): Reflects whether the dialog is currently visible

Best practices

• Use showModal() rather than the open attribute directly when you need modal behavior with a backdrop and focus trapping
• Always provide a clear way to close the dialog, such as a close button or the Escape key (built in by default)
• Style the ::backdrop pseudo-element to dim the rest of the page behind a modal dialog
• Prefer the native <dialog> over a hand-built modal — it handles focus management and accessibility concerns you would otherwise have to build yourself

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard