Tutorials › HTML Fundamentals › Dialog Element

Dialog Element

4 min read Quiz at the end

The dialog element creates an accessible modal. Open with dialog.showModal() and close with dialog.close(). Pressing Escape closes it automatically. Style the backdrop overlay with the ::backdrop pseudo-element.

Native HTML Dialog

<dialog id="modal">
    <h2>Confirm Action</h2>
    <p>Are you sure?</p>
    <button id="close">Close</button>
</dialog>

<button id="open">Open Modal</button>

<script>
const dialog = document.getElementById("modal");
document.getElementById("open").onclick = () => dialog.showModal();
document.getElementById("close").onclick = () => dialog.close();
</script>

← Details and Summary Next: Progress and Meter →

Topic Quiz · 5 questions

Test your understanding before moving on

1. What is the native HTML dialog element?

💡 <dialog> is a native HTML element for modal and non-modal dialogs.

2. How do you open a <dialog> as a modal?

💡 showModal() opens the dialog as a modal with a backdrop and focus trap.

3. How do you close a dialog?

💡 dialog.close() closes the dialog.

4. What is the ::backdrop pseudo-element?

💡 ::backdrop styles the overlay that appears behind a modal dialog.

5. What is the main advantage of native <dialog>?

💡 <dialog> handles focus management, Escape key, and ARIA automatically.

Quick Access

Dialog Element

Native HTML Dialog

Test your understanding before moving on