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 dialogshow()
- 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 theEsc
key.cancel
- This is triggered when the dialog has been closed. Since it is applicable in the previous case too, it is also triggered afterclose
.
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 attributemethod
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!
Top comments (0)