An example using the dialog element

A screenshot of JavaScript in Visual Studio Code

What is the dialog element?

The <dialog> element represents a component introduced in HTML5.1 to facilitate the creation of popup dialogs or modals on web pages. It offers a more semantic and native way to handle modals, as opposed to relying on third-party libraries or handcrafted solutions.

Using the <dialog> element is relatively straightforward. Once you have your <dialog> in the HTML, you can control its visibility with the open attribute. While this attribute can be toggled directly in the HTML or through JavaScript, the <dialog> element also provides a method called showModal() to make it appear as a modal. When invoked, showModal() displays the dialog in such a way that it floats above the content and the background gets dimmed, indicating a modal interaction.

Additionally, to close the dialog, you can use the close() method. Pairing these functionalities together, the <dialog> element and its associated API methods make it much easier and more standardized to implement modals on web pages.

In this example, we used the Unsplash app to get a Webflow DOM element added to the page and then we used the dialog tag with showModal() in our custom code.