Jayant's Clipboard

TIL - The HTML Dialog element

February 28, 2020

The Dialog Element is basically a dialog (duh) all with backdrop support and everything, so in many cases you may not need a third party lib to make a dialog. It has native JS APIs too for opening and closing it. Note: Browser Support is a little hairy.

Here’s a hosted example on glitch.me (though you have an example right on this page too): https://peaceful-meowing-yogurt.glitch.me/.

NOTE: Check the MDN Docs linked above to see if your browser supports this.

All you need to do to toggle a dialog is:

js → editable
js → preview
Default Dialog

When the dialog is triggered to be open, the open attribute is automatically added to it, which can be used to detect if it’s open or not.

And as you see, you can format the backdrop of the dialog using CSS!

When I was writing this, I faced an issue that I do not yet know how to solve. When you open and close the dialog, user selection or text editing on the page stops working. If you figure it out, tweet at me.

Jayant Bhawal

Built by Jayant Bhawal who is from India, trying to do funny stuff on the Web. You should follow him on Twitter