HTML Dialog Element
In this page:
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.
Note: Use the dialog tag to build native, accessible pop-up windows and modal alert boxes.
Warning: Manually adding the open attribute to your dialog tag will open it as a non-modal layout, which does not lock background focus.
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.
Note: Always open your dialogs using showModal() to lock background focus and assist screen-reader navigation.
Warning: Avoid updating styles manually to display your dialogs, as it will bypass the native modal behavior.
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.
Note: Use a semi-transparent dark backdrop to help your modal pop out from the main page.
Warning: The ::backdrop pseudo-element only displays when your dialog is opened using the showModal() method.
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.
Note: Users can press the Escape key to close native modal dialogs automatically.
Warning: Never use script tricks to bypass the native keyboard focus lock, as it violates accessibility standards.
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.
Note: Use the dialog form method to create clean, responsive in-dialog confirmation forms.
Warning: The form method="dialog" will not send data to your server; use JavaScript to read the values on submission.
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: