HTML Dialog Element
In this page:
<dialog id="id">
Content
<button onclick="this.closest('dialog').close()">Close</button>
</dialog>
<script>
document.getElementById("id").showModal();
</script>The dialog Element
The dialog tag defines a native, pop-up modal dialog box on your webpage. It is a simple container element that stays hidden by default unless it is opened using native JavaScript methods or the open attribute.
- Use the dialog tag to build native, accessible pop-up windows and modal alert boxes.
- Accepted attributes:
- open — boolean; shows the dialog
- Global attributes apply (id, class)
- method="dialog" on a form inside closes it
Example: The dialog Element
<dialog>
<p>This is a modal dialog</p>
</dialog>Opening and Closing Dialogs
To interact with your dialog box, you use native JavaScript methods: show() opens it as a simple pop-up, showModal() opens it as a modal (locking background focus), and close() shuts it cleanly.
- Always open your dialogs using showModal() to lock background focus and assist screen-reader navigation.
- Accepted values:
- open — boolean attribute; non-modal display
- show() — open non-modal
- showModal() — open modal
- close(returnValue) — close
Example: Opening and Closing Dialogs
<dialog id="myDialog">
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open</button>Customizing the Backdrop Overlay
When you open a dialog box as a modal using showModal(), the browser automatically displays a dark backdrop overlay behind it, locking down and separating the modal from your main page.
You can easily customize this backdrop using the CSS ::backdrop pseudo-element.
Example: Customizing the Backdrop Overlay
<dialog id="myDialog">Content</dialog>
<style>
dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
}
</style>Managing Keyboard Focus
Native dialog boxes provide built-in keyboard navigation support.
When you open a modal dialog, the browser automatically places the cursor focus inside the modal and locks it there, preventing keyboard users from accidentally navigating background links.
Example: Managing Keyboard Focus
<dialog id="myDialog">
<button>Focused automatically</button>
</dialog>
<script>
document.getElementById('myDialog').showModal();
</script>Form Integrations inside Dialogs
You can integrate HTML forms directly inside your dialog boxes. By setting the form's method attribute to dialog, the form submission will automatically close the dialog box, saving the input values without reloading the page.
- Use the dialog form method to create clean, responsive in-dialog confirmation forms.
- Accepted values:
- form method — dialog | get | post
- method="dialog" — closes the dialog on submit; returnValue is the submit button value
Example: Form Integrations inside Dialogs
<dialog id="myDialog">
<form method="dialog">
<button value="confirm">Confirm</button>
</form>
</dialog>- Opening modal dialogs using show() instead of showModal(), which fails to lock background focus.
- Attempting to style or blur the backdrop overlay without using the ::backdrop pseudo-element.
- Forgetting to provide an easy close button inside your dialogs, forcing users to rely on the Escape key.
- The dialog tag defines a native, accessible modal and pop-up window container.
- Open your dialogs as modals using showModal() to lock background focus, and close them using close().
- Style your backdrop overlay using the ::backdrop pseudo-element, and use method="dialog" on forms to close the dialog automatically on submission.
Standard HTML5 dialog elements and ::backdrop CSS pseudo-elements are supported natively by all modern web browsers.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: