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

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

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!

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 }.

Very easy and useful. Thanks Kevin. A small tip. If you have a global reset of padding: 0; margin: 0; the model window will be stuck to the left side of the page when it opens

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

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!

I was struggling to extend the dialog to full width and full height. just adding min-width to full helped me solve the issue. thanks a ton for the video.

Hello Kevin, since you asked, it could be easier: showModal() / hideModal() or openModal() / closeModal() would be, if not more obvious, more coherent. Great video nonetheless. Thank you

I made a polyfill for "dialog" several years ago, and I'm honestly glad it's *finally* outdated. It's about time.

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.

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

Thank you so much for just posting this video. I was trying to find a way to do this and came across your video which worked perfectly! Love watching all of your content

Was just looking at this. Great video and perfect timing!

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

I think you can basically wrap the close button in the form inside the dialog so u don't have to use an event listener on the close button. Sure, there might be scenarios where you'd need the event listener but not for most use cases. Great stuff.

I think I watched at least a dozen videos of yours before I realized you were saying "hello my front end friends" and not "hello my friend and friends"

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

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

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!

Very nice. I'm an angular developer, and it is nice to use native elements for stuff like this.

Thanks so much for this tutorial, I've been trying to figure this out for a while and a lot of tutorials online are very complicated as they are not aware of the built in functions that you demo'd. BTW for anyone struggling to get their modal to appear at the centre of the screen use the following CSS properties on your modal as I was getting frustrated that my modal was appearing in the corner of the screen. .modal1 { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border: 1px solid black; z-index: 1000; }

The idea of native HTML modals is so cool!!!!!

I had to pause the video halfway through and subscribe to his channel. So great, thanks!

I'm currently using bootstrap for modals at the moment since it was quick and dirty. But I'll be looking to implement this for sure! Love your content!!!

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

This is something we've needed for a long time. Dealing with JS libraries for this kind of thing is inconsistent at best, and frustrating at worst. Even though it *does* technically require JS to work as modals (it would be nice if there was an kind of thing), its so minimal that even implementation in frameworks will take no time at all.

After doing on/off hobbiest web dev for like 15 years I've spent so many hours making stupid modals this changes everything forever.

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

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.

My life has been changed since this video dropped

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

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.

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

Front End Friends! Yes! Great improvement

woooooooow awesome, my life will never be the same Thanks!!!

this makes things 10x easier love it

Okay, just had a good laugh 😆 "Have you ever needed a modal or popup to ...POP UP?" ...and then the KZfaq Cookie Banner popped up on me. Now, THAT'S what perfect timing is all about. Comedy GOLD

This is one of the amazing video I've ever seen. Thanks a lot Kevin for this amazing video.

I havent watch the video, but I already know its gonna be awesome, love your videos.

This is freaking dreamy. Thanks for sharing!

You help me improve myself in CSS every day. I hope you create js videos for beginners. that will make a difference for me because your way of explaining is so beautiful

You explain things so well!! I'm learning and this helped a lot, thank you!

After going through the pain of implementing an accessible dialog from scratch - this is amazing news! Can't wait to swap my custom implementation out for this! (Reduce bundle size and maintenance load)

I loved this new element so much that I already put it in production code :=

Native dialog is amazing! Thank you

Finally, it could be possible to drop MUI modal, which is pretty nice.

This puts such a big smile on my face

I will make this one. Thanks. Always a fan.🤗

Bro why is this KZfaq channel has low views, my css skills went up drastically after i discovered him, i wish this KZfaq channel will become more popular in the future, i found out that you can explain css better than web dev simplified and make learning css fun

amazing tutorial on how to create a popup modal. thanks a lot for the vid.

Totally nailed frontend friends on this one bud!

DUDE THAST SUPER EASY THANK YOU KEVIN

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!

Thanking you, I have been trying to learn practice anyway.

Is there a clean way to close on outside click, by chance? I'm assuming you can throw a listener on the ::backdrop pseudo element? Otherwise great content as always, thank you so much!

Very useful tag! Didn't know about it

You made it soooooo easy. Thanks Kevin

This is really useful functionality!

This is absolutely amazing! Had so much trouble making my own custom modals...

Awsome.There are sofisticated widgets library that have this(eg Anguular Materials) and now it is available out of the box

I love this native modal feature already! I'm gonna pass this on to my designer for the website I'm working on, but I assume she also got your notification hehe. You can make the onclick callback shorter by removing all the syntax and just pass the anonymous function as a callback variable if you don't need any extra functionality 😉

This is really interesting and saves so much set up. Very cool.

Thanks Mr. Powell !

Wow that's really cool I didn't even this existed

I think I'm in love 😅😅😅 *This has been a long time coming,* I hate the confirm dialog!🤨

Thanks for another great video! I don’t know if it’s safari (iPhone) that doesn’t support it yet, but VoiceOver doesn’t announce that the modal has popped up. Usually you need to set a live region for screen readers to announce real-time changes like this. I’m curious if that is now out-of-the-box. I’ll check with another screen reader and report back … UPDATE: Tested with -compatible browser and the NVDA screen reader. It works! Not clear that it works with modals triggered by something else than a user interaction. For example "You're about to be signed out automatically". That may or may not still need a role="alertdialog". Another thing: an accessible solution, like a11y modal, should place the focus back on the button/link once the modal is closed.

I think this will definitely replace the MudBlazor dialogs I’m currently using.

I am eagerly waiting for the videos to be uploaded by Professor ❤❤

The last time I watched your video, you said "Hello there my friend and friends" in your intro

Excellent! Thank you, Kevin!

In ::backdrop You can use the following method background-filter : blur(“add how many px with blur ”) i use 5px

Dammit! I spent a lot of time coming up with a JavaScript modal dialog box scheme, only to have YOU undo it with a single native HTML element! lol

Omw this is amazing! Thanks for sharing!

Nice tutorial with some handy tips of variations.

Thank you so much, Kevin!

Wow. Simple! (And I even understood the Javascript! )

This is revolutionary!

So cool and simple. Thanks a ton!

OMG Thank you so much, you are my hero

This is awesome! :D Thanks for sharing!!

Very useful, thank you man!

I'd be interested to learn more about how this might help with developing modal functionality that's accessible. I know that modals are a hot topic for accessibility since they're so easy to screw up, and my guess is that this new component is probably handles a lot of stuff like keyboard focus and navigation out of the box which will be very helpful.

Hi Kevin, how would you go about closing the dialog by clicking outside the dialog?

Thanks a lot Kevin!

Good stuff ✨✨

Fabulous indeed!

Thank you mr powell🤝🏾

super as always. ty man

Awesome! Thanks for the great content!

Looks like the right type of 'notice' for skipping menus for accessibility.

This is gold.

OMG This is awesome!

super! wish they gave us the modal::backdrop - filter blur option to go with it..

No more bootstrap modals! Although I create my own every time I need one even though I have bootstrap linked because I don't like how bootstrap creates and appends a backdrop element every time you open the modals. And of course it destroys the backdrop when you close it

Why did I not know about the awesome dialog element? I literally built a modal a few weeks ago from scratch by messing around with divs.

Found solution to center modal with margin auto. By default the modal is positioned absolute, top left.

This is so useful! Thanks.

Another fine job, keeping us informed on all the latest HTML/CSS trends. Very nicely explained. Thanks. Kevin {2022-03-19}, {2024-02-16}

Glad there's an easy element for this now. I hope it's widely adopted so we can easily script it into oblivion when it's used to boohoo about my ad blocker doing its job.