The New dialog HTML Element Changes Modals Forever

Modals have been a part of web development for decades now, but they have always been a bit of a pain to work with. The main reason modals have been such a pain is because it is difficult to make a truly accessible modal that conforms to all accessibility standards. This is why the new HTML dialog element is so exciting. The dialog element makes it so much easier to create accessible modals, and in this video I will explain everything you need to know about the dialog element to use it in your next project.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:55 - The traditional way to make modals
02:45 - Using the dialog element
08:02 - Advanced dialog element use cases

#HTMLDialog #WDS #HTML

[Thassalocracy]

This dialog element is amazing not just for accessibility but it comes with its own show/close API that can be easily implemented in React with a useRef hook. This should be the direction for web/mobile app development - making life easier for both the end user and developer.

[AntoshaPushkin]

Wow, I remember implementing modals like that 11-12 years ago for my pet projects back in the times when I studied at school. So surprised that only now it became a standard feature

[colindante]

There's multiple ways one could explain an HTML tag but Kyle's way is the absolute best. Always so grateful. Thanks much))

[justepierre]

Just a small tip. At least on VSCode, do you know that you can change the element's tag name more easily ? Click on the tag name then press F2. It avoids having to modify the name on the closing or opening tag because it works both ways.

[MikkoRantalainen]

Great video! I was already aware of <dialog> but you explained some features that make it worth using (especially the keyboard accessibility with modal dialogs). Previously I didn't see any point using this instead of JS implementation I already had implemented.

[CirTap]

Thanks for bringing this to people's attention👏. I am currently "migrating" from A11yDialog (which is great btw) to native, now that implementations got so much better over the last couple of years. Also saves so much custom and library code all over: HTML, CSS, JS; from several kb to a few dozen lines all across.

[ezra]

I just spent a good chunk of time creating a model for a project . Nice to see the simplicity of this new html element. Thank you!

[StefanKressCH]

The best feature imho are stacked modals. If you try to create a modal inside a modal the old fashioned way with the outer modal(overflow:hidden), it will display the stacked (inner) modal only inside the already opened modal. With <dialog> you're completely free to stack and overflow as you like.

[ElijahScottx]

Awesome! Dialogs and modals has always been a pain point in front-end dev.

[Grouiiiiik]

Pretty neat. I like that it's allowing to close with the escape key by default.
It would be a bit cleaner to wrap the contents of the dialog rather than using coordinates on click though.
Then it's just : `dialog.addEventListener('click', e => e.target !== wrapper && dialog.close())`

[albedesigns]

I'm kinda new around here so I didn't know about your blog - excited to see the amazing content you have on there!

[zigggen]

Other way to handle click outside is to listen on click for dialog element and, add `e.stopPropogation` for dialog body. This can also handle the edge case when border is rounded.

[mrhaiku]

Great content and presentation/demo. Thanks!

[onildo_costa]

Holy, I was just searching this 3 days ago. Now you just make my day bro, thanks!

[FirdausAziz]

Thanks for highlighting things that can be done with native/raw HTML.

[jacorachan]

Great video, short and to the point. You have a new sub!

[andrebotha]

Kyle, you nailed it again man. Well done. Very useful content. 👏🏻👏🏻👏🏻

[tljoshh]

Neat! I had no idea about any of this! Definitely going to make use of these in future

[rooneyjohn]

You are my hero. Your videos are always amazing, straight to the point, and useful!!

[LePhenixGD]

8:41 I've been familiar with modals for over a year, but it wasn't until I watched your video that I discovered the save form inputs feature doesn't require JS. That's a fantastic revelation!

7:50 I have a small tip for those who declare global CSS variables using :root{}. Keep in mind that you cannot apply them to the backdrop because they are considered 'undefined' within the same module level as the :root{} and they're considered out of scope