Dialog Element: A New Approach To Modals And Popups

Hey there, folks!

So recently, dialog HTML element became stable in all modern browser engines and can be safely used in your projects right now.

What's so interesting about this element you ask?

It can be easily used to create modals/popups for your web apps in just a few minutes, this element exposes some methods that can be used to control it's behavior and is fully customizable.

This can be used as a great alternative to portals in React.

We'll first look at a vanilla JS use-case and then one in React using a custom component.

Let's dive in....

HTML Element

The element can be added using the dialog tag as follows

 <dialog open>
   <p>Dialog Content</p>
 </dialog>

The open attribute indicates the dialog is shown by default. We can add all kinds of UI inside it, like forms for any use case - more on that below.

Methods

There are 3 methods available for this element.

• close() - closes the dialog

• show() - displays the dialog (background UI elements, like buttons, inputs, etc are still interactable, can be used for popups)

• showModal() - displays the dialog over any other UI element (even other open dialogs) visible on screen with some background overlay (think of it like having highest z-index, none of the background UI is interactable until it's closed, can be used for modals)

Here's the difference between the later two functions.

Note, this example contains default browser dialog without any stylings

Events

This element emits two events based on the current condition.

• close - This is triggered when user tells the browser to close the dialog, as an example using the available in-built feature of closing it through the Esc key.

• cancel - This is triggered when the dialog has been closed. Since it is applicable in the previous case too, it is also triggered after close.

Both of these events are also available via their function alternatives onclose and oncancel respectively.

Open up the console, try closing the dialog using X and then using Esc key.

The returnValue

This property on the dialog element can be used to detect the button value which was used to close the dialog. Although this works when

• there is a <form /> inside dialog which has attribute method set to "dialog". Then submitting form automatically closes the dialog. In this case, returnValue is set to submit button's value.

  <form method="dialog" />

• if manually closed, passing a string as an argument to the dialog close function call in the button click event callback as

  dialog.close('This string will be assigned to returnValue');

A full form-dialog using everything we have gone through so far.

Note, that we are only updating the details if the form was submitted, not if user closed the dialog manually. This is detected based on the returnValue property value of the dialog.

Overlay Customization

The background overlay of the dialog can be customized using the ::backdrop pseudo-element, we need to set the background property for it and it will be reflected on the overlay.

React Dialog Component

Here's a react component version of the dialog element which can be further customized with styles passed as className prop and content as children as per requirement.

That's it, for this one folks!
If you have any questions or suggestions, feel free to reach out to me!

Connect with me on Twitter, Github