The HTML 'dialog' Element

Waleed Mumtaz

@waleedmumtaaz

Published on

Let's face it. Coding up your own modal from scratch is kind of a tiring process. Dealing with the position of the modal, setting up opening and closing methods in JavaScript, and on top of that, dealing with focus! Thankfully, HTML has a native 'dialog' element that makes dealing such stuff so much easier. Let's explore!

Table of Contents

  1. What is the <dialog> Element?
  2. JavaScript APIs for the <dialog> Element
  3. Why use showModal() instead of show()?
  4. Closing a dialog Within HTML Without JavaScript API Call
  5. Exploring Further
  6. Browser Support
  7. Conclusion

What is the <dialog> Element?

As the name suggests, the <dialog> element in HTML represents a dialog box such as confirmation, alert, notifications, etc.

Here’s a basic markup for a dialog in HTML:

As you can see, we have a <dialog> element with <p> inside of it. But there is no output. The reason behind it is the <dialog> element comes with some user-agent (or browser default) styling. Let’s have a look at the styles for our dialog:

User-agent styles in Google Chrome showing that the dialog element contains a property of 'display: none;' by default when the attribute 'open' is not used on the dialog

As we can see, among all the user-agent styles, there is a display: none property. Hence, we cannot see our dialog.

But, how do we see our dialog? Well, that’s simple enough. We use the ‘open’ attribute on our <dialog> element:

Looking at the user-agent styles, we can now see that the property display: block is now being used, along with many other default styles such as position, margin, padding, border, etc. User-agent styles in Google Chrome showing that the dialog element contains a property of 'display: block;' by default when the attribute 'open' is used on the dialog

JavaScript APIs for the <dialog> Element

Using the ‘open’ attribute in HTML for our dialog element is not very useful on its own. The use of JavaScript makes it much easier to control the behavior of our dialog. The dialog element comes with the following methods:

dialog.close();
dialog.show();
dialog.showModal();

dialog.close()

The close() method simply closes the dialog.

dialog.show()

The show() method displays the dialog on a webpage. The dialog element can be referenced based on its id or class. A user can interact with what is beneath the dialog when show() is used. Also, the focus shifts to the dialog from where it was opened.

dialog.showModal()

The showModal() method displays the dialog as a modal. When this method is used, it prevents interaction with what is beneath the modal. It also gives us the CSS ::backdrop pseudo-element, which we discuss below. And just like in the show() method, the focus shifts to the modal when it is opened.

Why use showModal() instead of show()?

In contrast to the show() method, the showModal() method provides us with the following functionalities that we expect a modal to have:

  • showModal() gives us a ::backdrop pseudo-element, which is a box of the size of the viewport itself that appears under the dialog and can easily be customized with CSS.
  • showModal() prevents interaction with the rest of the webpage.
  • You can press the Esc key to close the modal when it is open.

Closing a dialog Within HTML Without JavaScript API Call

If you are in a situation where you do not want to use JavaScript to close your dialog, i.e., you do not want to use the close() method, you can us a <form> element inside your dialog. Give your <form> an attribute of method="dialog" and you are good to go! Here is an example:

Exploring Further

Let’s explore the things explained above with the following CodePen where I have customized a dialog’s backdrop and added animations to a dialog.

Browser Support

As of writing this article, the browser support looks pretty solid for the dialog element on CanIUse. Browser support for the dialog element (as of 27 November, 2022)

Conclusion

And that’s about it for the <dialog> element. As you have seen from the examples in the last CodePen how easy it is to use the dialog element for your modals without coding one up yourself and dealing with all the complexities. Hope you liked this article. Now go have a dialog with HTML. Happy coding! 😀