Javascript banner image.

You may well be wondering why I have 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 taken care of using a Javascript library such as jQuery.

The dialog is either open or it is closed:

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

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:

Default <dialog> with Javascript

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.

Here is my default “pop-up” dialog

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.

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.

Default

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

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

Modal

The dialog can be opened as modal — that is you are unable to 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.

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 then closes after a 5-second delay.

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


Resources:

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.