Home > Abakada: Back to Basics > Language References > HTML Elements > DIALOG Element
| Represents a dialog window. | HTML 5 |
HTML Syntax
<dialog closedby=user_action open>
...
</dialog>
NOTE: Both start and end tags are required.
The <dialog> element represents a transitory part of an application, in the form of a small window ( or dialog box ), which the user interacts with to perform a task or gather information.
Once the user is done, the dialog can be automatically closed by the application, or manually closed by the user.
It can be opened as a modal dialog, which prevents interaction with the rest of the page, or as a non-modal dialog, which allows users to interact with the page while the dialog is open.
The dialog element makes it easy to create popup dialogs and modals on a web page, allowing for user interaction without navigating away from the current page.
The element can be used for various interactive components, such as a login form, custom message boxes, confirmations, and even popup image modals.
The dialog can be displayed using the open attribute, which automatically opens the dialog on page load.
Using this method, though, requires that the <dialog> element be enclosed within a <form> element whose method attribute is set to dialog.
Otherwise, there is no way to close the dialog box except to close the current page or to move to another page.
Alternatively, there are two JavaScript methods authors can use to open the dialog programmatically:
show( ) to display a non-modal dialog.showModal( ) to display a modal dialog
The dialog can be closed through various user actions, such as clicking outside the dialog ( light dismiss ), pressing the Esc key, or using a button within the dialog that triggers the JavaScript close( ) method.
The <dialog> element supports the following attributes, in addition to global attributes common to all HTML elements.
| closedby | user_action | Specifies which user action closes the dialog |
| open | open | Specifies that the dialog element is active and that the user can interact with it |
The following example shows how the <dialog> element may be used.
<dialog id="msgBox">
<p>Hello. Welcome to HTML!</p>
<button id="close">Close</button>
</dialog>
<button id="show">Show</button>
which would render on a Web page as follows:
Here is an example of using CSS to customize the appearance and behavior of a modal dialog.
Show me
And here is an example of using an image within a modal dialog.
Show me