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.

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.

The open attribute can be declared in a dialog to indicate that the element should be initially visible.

As of 2015/03/31, browser support for the dialog element is very low. Authors may have to rely on scripts to achieve the same effect cross-browser, until support grows.

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.

The actions in this example are provided by client-side scripts. The implementation of these scripts will not be treated in this document.

<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>

Hi! This is our first dialog. If you like it, don't close it...

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.

The two possible ways of opening a dialog can only be controlled with client-side scripts. This subject is outside the scope of this website and won't be treated.

<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>

Wow! this is better, isn't it?

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>
Hi! I get up early, you know...

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.