Various elements in HTML are semantic elements, meaning these elements clearly describe their meaning to the browser and the developers working with them, and they serve a single purpose on the webpage. One such element in HTML is a dialog element. The dialog element, also known as a modal dialog, is used to display a pop-up box on the webpage. You can create a modal dialog using CSS but that would be a tricky task. Instead, you can use the semantic HTML dialog element to create a modal dialog on the webpage.
HTML dialog tag
The HTML dialog tag is one of the tags from the semantic HTML elements category. The dialog tag is used to create a pop-up box or a dialog box on the webpage, using which the user exchanges and submits some information. This dialog box or modal window is rendered within the active browser window. By default, the dialog box is hidden but you can activate it by using the open attribute, an example of which we'll discuss later in this section.
Now, let's look at the syntax of the dialog tag,
<dialog>
...
</dialog>Like most HTML elements, the dialog tag has an opening and a closing tag. The HTML or the structure inside the dialog tag will be visible as a separate modal dialog on the same web page. Users can also interact with parts of the dialog box but there are some conditions to successfully interact with the modal dialog box. Let's see how and when a user can interact with the dialog box.
Attributes
The dialog tag supports event attributes and global attributes. Besides these, there is a special attribute called open. The open attribute of the dialog tag indicates that the dialog box is active and the user can interact with it. Let's see this in action:
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, libero?
</p>
<dialog>
<p>Hello, I am a dialog box.</p>
</dialog>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos,
dignissimos!
</p>
</body>Here is the output of the HTML above:
As you can see, despite the dialog tag in the HTML code above, the dialog box is not present because the open attribute is not applied, that is, when the open attribute is not set, the dialog box is not shown to the user.
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, libero?
</p>
<dialog open>
<p>Hello, I am a dialog box.</p>
</dialog>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos,
dignissimos!
</p>
</body>Here is the output:
This is not just another semantic element — the dialog element also has JavaScript APIs available and some special CSS. It is recommended to use the .showModal() or .show() methods in JavaScript to render the dialog box rather than using the open attribute. You'll learn about these methods in the JavaScript course.
Example
Let's see how you can customize the dialog box using CSS in the example below.
<dialog open>
Hey! This is a dialog box.
</dialog> dialog {
border: none;
box-shadow: #00000029 4px 2px 4px 6px;
border-radius: 10px;
padding: 30px;
background-color: aqua;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
}Here is the output:
Now, let's take another example that uses JavaScript to open and close the dialog box. For now, don't worry about the JavaScript code. Just observe how the modal box is created and how it can also be styled using CSS according to your needs. You can refer to this link and play around with the example.
Accessibility
The dialog element is mainly supported by all up-to-date browsers. But to ensure accessibility for Safari users below version 15.4, you need to use a polyfill (refer to the JavaScript course to learn more about this). Make sure to provide a button or any other mechanism to close the dialog box. Because once the dialog box is opened, you can't interact with the rest of the page other than the dialog box. But with JavaScript powers, you can write scripts that work to suit your needs.
You can also use the Escape key to close modal dialogs. By default, this is possible only if the dialog is invoked by the showModal() method.
Conclusion
In this topic, you learned how to create a dialog box using the <dialog> element in HTML. The dialog element supports global and event attributes. There is a special attribute called open, which is used to display the dialog box. There are more ways to display the dialog box using HTML, CSS, JavaScript, but the best possible way to do it is by using the showModal() APIs in JavaScript.