HTML 5 <dialog> Tag
At the time of writing this element had limited browser support. If the above example looks weird, it's probably due to that.
<dialog> tag indicates a part of an application that the user can interact with. Examples of dialog could include a dialog box, inspector, or window.
<dialog> element accepts a boolean attribute called
See here for more examples of usage.
<dialog> element. This is achieved via the
HTMLDialogElement interface (this interface is included in the HTML specifications for this element).
HTMLDialogElement interface has a number of methods and properties that you can use to control your dialog boxes.
They are as follows.
- Shows the dialog box. The user can still interact with other elements in the HTML document while the dialog box is visible.
- Shows a "modal dialog". This type of dialog prevents the user from interacting with other elements on the page until they've closed the dialog. Browsers will often darken the rest of the page to draw attention to the dialog, and to provide the user with a visual clue that they need to acknowledge/close the dialog before they can continue.
- Closes the dialog. Accepts
returnValueas an optional parameter. This parameter will update the
- Retrieves the optional parameter that was passed to the
- This property contains a boolean value (either
true, the dialog is displayed to the user. Otherwise it is hidden.
<dialog> element is closed, the
close event will be fired.
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example,
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The attributes that you can add to this tag are listed below.
The following table shows the attributes that are specific to this tag/element.
|open||When this attribute is present, the
Note that the
tabindex attribute (below) does not apply to
The following attributes are standard across all HTML 5 tags (although the
tabindex attribute does not apply to
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handler Content Attributes
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
For a full list of event handlers, see HTML 5 event handler content attributes.
History of the
<dialog> tag was first introduced into the HTML 5 draft specification, it had a different purpose. When it was first introduced, its purpose was to indicate a dialog between two or more people (for example, a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log). It was subsequently dropped from HTML 5, but then later re-introduced into the HTML 5.01 draft specification (as well as the HTML Living Standard) with a completely different purpose (of which is outlined in this current page).