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.
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
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>
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.
<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>
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.