Dialog (Native Modal) in HTML
From the HTML cheat sheet · Interactive & Web Components · verified Jul 2026
Dialog (Native Modal)
Native modal and non-modal dialogs without JavaScript libraries
html
<!-- Modal dialog -->
<dialog id="confirm-dialog">
<h2>Confirm Action</h2>
<p>Are you sure you want to proceed?</p>
<form method="dialog">
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
</form>
</dialog>
<button onclick="document.getElementById('confirm-dialog').showModal()">
Open Modal
</button>💡 <dialog> with showModal() gives you backdrop, focus trapping, and Escape-to-close for free
⚡ form method="dialog" auto-closes the dialog on submit — no JavaScript close handler needed
📌 Style the backdrop with dialog::backdrop — supports background, blur, and animations
🟢 Replaces most uses of modal libraries — native, accessible, and lightweight
dialogmodalinteractive