Native dialog
The <dialog> element is the native browser modal/dialog. Use .showModal() for a modal and .show() for a non-modal dialog.
HTML
Intermediate
4 min read
The dialog Element
Example
<dialog id="confirm" aria-labelledby="dlg-title">
<h2 id="dlg-title">Confirm Deletion</h2>
<p>Are you sure you want to delete this item?</p>
<button onclick="document.getElementById('confirm').close('cancel')">Cancel</button>
<button onclick="document.getElementById('confirm').close('ok')">Delete</button>
</dialog>
<button onclick="document.getElementById('confirm').showModal()">Delete Item</button>
<script>
document.getElementById("confirm").addEventListener("close", function() {
if (this.returnValue === "ok") deleteItem();
});
</script> Pro Tip
The native dialog handles focus trapping automatically — a major accessibility win.