<dialog>
A dialog box; a modal one is opened with `showModal()` and blocks the rest of the page.
Syntax
<dialog id="d">…</dialog>Attributes
| Parameter | Type | Description |
|---|---|---|
| open | — | Show the dialog as a regular block (without dimming the page). |
| closedby | any | closerequest | none | Optional. What closes it: a click outside, the Esc key or nothing. |
Examples
A modal window with a close button:
<button onclick="note.showModal()">Show the offer</button>
<dialog id="note">
<p>Today only: a free cookie with every latte!</p>
<form method="dialog">
<button>Close</button>
</form>
</dialog>Styling the window and the backdrop:
<style>
dialog { border: none; border-radius: 12px; padding: 20px; }
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
</style>
<button onclick="d.showModal()">Open</button>
<dialog id="d"><p>Styled dialog</p><button onclick="d.close()">OK</button></dialog>Notes
showModal() opens the window on top of the page, dims the background via ::backdrop and closes on Esc. A form with method="dialog" closes the dialog when submitted. Do not use the open attribute for modals — it shows the non-modal version.
See also
- <details>, <summary> — A disclosure block without JavaScript: `<summary>` is the visible title, the rest is hidden until clicked.
- popover — Turns an element into a layer that pops up over the page — without JavaScript.
- <form> — A form: collects data from its fields and sends it to the server.
- inert — Makes part of the page inactive: it cannot be clicked, reached with Tab or selected.
Related recipes
In the tutorial
- Disclosure widgets and dialogs — The details and summary tags, an accordion, the dialog modal window, closing with form method=dialog and popover blocks.