dialog element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The dialog
element represents a part of the document meant for the user to interact with, like for example, a dialog box, an inspector or a window. HTML5 added this element to grant authors native support for a feature that's been provided through scripting for a long time. Dialog boxes are not only part of web documents, they have been used in desktop programs for many years.
Defining a dialog
element is an easy task: any number of elements must be declared inside its opening and closing tags. The implementation that will make it work as expected, in the other hand, require the use of client-side scripts. This is obviously due to the interactive nature of the dialog
element.
Examples
In our first example, we'll create a simple dialog
with some content. A button
will be provided outside the dialog
to allow users to open it. A second button
will be provided inside the dialog
to close it whenever needed.
<button type="button" onclick="openDialog('dialog1')">Open dialog</button>
<dialog id="dialog1">
<p>Hi! This is our first dialog. If you like it, don't close it...</p>
<button type="button" onclick="closeDialog('dialog1')">Close</button>
</dialog>
You can note three things in the previous example: first, the dialog
is really ugly (but don't worry, this can be changed with some style sheet information); second, once the dialog
was open, you could still interact with the content in the background; and third, the dialog opens exactly where it's been declared (this could be the expected behavior in some cases).
In the following example we'll show a nice modal dialog
, solving these three issues. For the first issue we're adding some style information through the class
attribute, and for the rest, we're opening the dialog
in a special way that will block the background content and automatically place the dialog
in the center of the screen.
<button type="button" onclick="openDialog('dialog2', true)">Open modal dialog</button>
<dialog id="dialog2" class="example-dialog">
<p>Wow! this is better, isn't it?</p>
<button type="button" onclick="closeDialog('dialog2')">Close</button>
</dialog>
Attributes
Specific attributes
open
A boolean value indicating if the dialog
should be initially visible or not. If this attribute takes the value "open" or the empty string (""), or if it's just present, the dialog
will be initially visbile.
Example
<button type="button" onclick="openDialog('dialog3')">Open dialog</button>
<dialog id="dialog3" open>
Hi! I get up early, you know... <input type="button" value="Close" onclick="closeDialog('dialog3')">
</dialog>
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.