HTML5’s <dialog> tag

You may wonder why I posted an article about an HTML element in the JavaScript category. Simple: the element is pretty useless unless you can open and close it with JavaScript. When you use JavaScript to open/display and close/hide the dialog, the magic happens and the dialog pops up in the center of the viewport. This kind of interface widget is usually handled using a JavaScript library such as jQuery.

1. Some HTML

The dialog is either open or it is closed:

• <dialog> — it is not visible at all
• <dialog open> — it will be displayed vertically and horizontally centred over the contents of the page

The following code:

<article style="border: solid 1px black; padding: 1em;">
<h2>Default &lt;dialog&gt; with Javascript</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
<dialog open>
	<p>Here is my default "pop-up" dialog!</p>
</dialog>
<p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>

<p>Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
<article>

renders as follows in the browser:

2. Default

By default, the user can interact with the web page even while the dialog is displayed. The default styling of the dialog can be seen in the example below:

See the Pen by David Fox (@foxbeefly) on CodePen.

3. Modal

The dialog can be opened as modal — that is you cannot interact with the webpage behind the dialog — you must first dismiss the dialog.

The dialog box and contents are stylable. It does not seem possible to style the overlay.

See the Pen HTML5 <dialog> tag with Javascript by David Fox (@foxbeefly) on CodePen.

4. Modal with timer

In the final example, I have used a modal <dialog> to create a “splash screen” that is open when the page loads and closes after a 5-second delay.

See the Pen Modal <dialog> with Javascript timer by David Fox (@foxbeefly) on CodePen.

Resources:

1. Coyier, C. (2019) Some Hands-On with the HTML Dialog Element: CSS-Tricks, CSS. Available at: https://css-tricks.com/some-hands-on-with-the-html-dialog-element/ (Accessed: 28 May 2024).
2. W3schools. (no date) HTML DOM Dialog Object. Available at: https://www.w3schools.com/jsref/dom_obj_dialog.asp (Accessed: 28 May 2024).