dialog = the easiest way to make a popup modal

Ever needed to make a modal? Well, we have a native HTML element that does the job with the dialog element! It does a lot of things out of the box that are really awesome, so let’s see how it works!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:54 - What we're starting with
01:22 - Adding the dialog element
03:07 - the show() method
03:48 - the showModal() method
04:20 - closing the modal with close()
05:00 - closing the modal with a form submission
06:31 - styling the backdrop
07:46 - the default styling

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

And 2 days before this went live, dialog and ::backdrop gained support in Safari, and it's now supported in all major browser engines 🥳

Well, this is good timing. I'm collaborating with a bunch of colleagues on a hackathon project starting tomorrow, and will need a modal. Was going to create it from scratch, so this will be a huge time saver since we only have a day and a half to have our idea come to life. Thank you!

[danielvillegas]

I was literally trying to build my own modal with css last week. Amazing.

[CyberTechBits]

Thanks Kevin! Love your content. I am immediately implementing this into two of my active projects! So, much cleaner/easier and less code than the old way! Thanks for keeping me up to date my friend!

[the-real-tridder]

I watched this, thought it was cool, went about existing, 3 months later, needed it, remembered your vid, searched it, found it and jobs done. Love your work, thank you!

[ChristianMay]

Learned this the hard way: if you change the "display" style property on the dialog, you'll also have to add a "display: none" for when the dialog is closed.

The way the browser closes a dialog is just by setting `display: none` on it when the "open" attribute is false. Since that style comes from the User Agent stylesheet, it's very easy to overwrite - so if you have a rule like: .myDialog { display: grid }, make sure you also add an accompanying rule like .myDialog:not([open]) { display: none }.

[rozneg]

Amazing that it comes with that much functionality out of the box, saves a lot of time. Good job, thanks for sharing it!

[Jllyman]

This is actually the perfect functionality for a personal project I'm working on. Put it in and it just works! Love it when that happens.

[Jaycaponex]

I'm mind blown! Thanks for keeping me up to date with all that new and fancy css stuff :)

[bobdinitto]

Awesome! And the background options are a nice touch. Sadly too late for my current project but I shall consider using this going forward. Thanks for showing!

[walkingin]

Absolutely what I need right now for my project. Thanks Kevin

[hovhadovah]

This is awesome! Pleasantly surprised to see that <dialog> also traps focus by default for accessibility.

[trplnr]

I've been trying to find out how to make these and i didnt know it was this easy, Thanks!

[andertker]

I think this will be useful for anyone like me that has started doing a library as part of THE ODIN PROJECT curriculum. You're doing a great job; keep it up. Greetings from Bilbao, Spain.

[Ferdam]

It's great. Next I want native css/html option to style/modify Drop Down menus, would be a dream!

Also, you can easily use backdrop-filter: blur(4px); to get a blurry background, if you like fancy stuff

[oliver]

Miracle! I just need this in my interview test and youtube recommend this to me!

[heisthazey]

I've had to hand craft 3 modals just this week..this video could not have any better timing. I'm excited to use this & hopefully browsers will catch up and start supporting it across the board so dialogs can actually be used in production sites.

[tundeakinniyi]

Thanks Kevin for this. You are that special person God has given this generation. Thanks for the updates. I like your explanation always

[losrobbosful]

Exactly the thing I was waiting for.
Kevin saved my life again once again

[sirQuilly]

This is mind boggling - just yesterday I was searching the net for this exact solution...
Thanks Kevin!