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....
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.
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
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
cancel- This is triggered when the dialog has been closed. Since it is applicable in the previous case too, it is also triggered after
Both of these events are also available via their function alternatives
Open up the console, try closing the dialog using
X and then using
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
"dialog". Then submitting form automatically closes the dialog. In this case,
returnValueis 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
returnValueproperty value of the dialog.
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)