Let's Have a Dialog about Dialogs!

Think of the HTML dialog element as a browser-native modal. Much of the functionality that you would traditionally need to implement from scratch is available from the get-go. In this Bit, over the course of eight steps, I'll show you the bulk of what you need to know.
Watch thousands of videos, track your progress, and participate in a massive Laravel community at Laracasts.com.
Laracasts: laracasts.com
Laracasts Twitter: / laracasts
Jeffrey Way Twitter: / jeffrey_way

[@Laracastsofficial]

A couple of things to consider, that we didn't cover in the video.
1. CSS positioning can sometimes get tricky if you place a dialog deeply nested in the DOM. It's common to place modals at the end of the page, just before the closing body tag. If you're using Vue or React, research portals/teleports.


2. If you want a fancy hide animation (like sliding down), you may run into an issue where the "hide" animation runs immediately when the page loads. There's a couple ways to deal with this, but the most popular is to toggle a "disable-animations" class on your body tag. This class should disable any running animations.
.disable-animations {
animation-duration: 0s;
/* ... */
}
Alternatively, you can use @starting-style for your transitions. At the time of this writing, it only works in Google Chrome, but I'm sure more browser support is coming soon. Here's an example you can review:
codepen.io/jeffreylaracasts/pen/pomyVoy

[@Munja12]

Here's how I animated backdrop:
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 5;
backdrop-filter: blur(2px);
animation: anim .2s;
animation-fill-mode: forwards;
}
@keyframes anim {
0% {
background: rgba(0, 0, 0, 0.01);
backdrop-filter: blur(0px);
}
100% {
background: rgba(79, 69, 126, 0.8);
backdrop-filter: blur(4px);
}
}

[@3mro_coding]

You are naturally born as a teacher. The way you simplify the process is really simple. Thanks for sharing and teaching while you are learning.

[@jeffreyway520]

Heads up, a 4k version is still transcoding. Should be available shortly.

[@Richardritchie-w1f]

❤ You are my favorite teacher ever. You are representing laravel in the best way ever. Thank you so much for your work. I guess laravel gaining in weight by your presence, and not opposite xD. See ya soon on Laracasts. ❤

[@drujas]

Jeffrey Por que no utilizas el logo de la "A" de laracAsts como el avatar de tu canal en RUclips, se vería genial, y seria mas fácil distinguir tu contenido del montón. Ya que ahora abunda la cantidad y hay que saber distinguir la calidad. Buen video, saludos desde Bolivia...

[@kamaladeyinka40]

Repo?

[@simonswiss]

Whoaaaa, I have never used the ::backdrop pseudo-element - always have an 'inset-0' extra div. Awesome! 🙉

[@TheThirdWorldCitizen]

One option for animation/transition and removing ::backdrop, is to simply use a generic container inside the dialog. And add the opacity/visibility properties to the container instead.
Some might think this sounds silly, but it’s actually convenient because now the dialog is 100dvh and 100dvw, and using flex or grid, you can position the generic container wherever you want.

[@zorgo8513]

Someone else has probably already figured this out but if you always have the dialog set to display block but at 0 opacity you can still tab inside of it and focus elements which is bad for accessibility.

[@ihorrud5088]

Thanks, Jeffrey for the video. By far the best solution for modals IMO

[@aungkomin4235]

may I know what kind of theme do you use in your phpstorm?

[@VinceKronlein]

Personally I would have gone with named slots instead of the extra components, other than that, I don't think you missed anything. I was thinking you might get backdrop transitioning if you wrapped the native dialog in a Vue transition? Well done mate. Thanks.

[@bulent2435]

This is a gem. Thanks.

[@gsj005]

4:10 actually, it submits the form because the button elements, by default, have a type "submit". As that button should close the modal and not submit the form, the proper fix is to set the button's "type" attribute to "button" (i.e., ).

[@CRiley-zx1ws]

There's a million modal components available for various frameworks...
I don't get when adding the functionality to the HTML spec, why they didn't look at the features used in 99% of them. Body scroll lock (with position locking) and backdrop & content transitions are absolute must haves.
The native way still requires so much hacking there's no reason to move from a custom implementation.

[@devinegger4570]

Accessibility is the biggest concern I can think of with setting the dialog to always display: block and controlling the visibility with opacity. With this method the dialog is always rendered to the DOM and visible to assistive devices - which will relay the content to the user without context and likely be confusing.
Something that I have done to overcome this is create a tiny helper function that opens the dialog, and then afterwards set a class that will apply the transitionable state. There's probably issues with this implementation too, as you likely came across this method in your searching. If so, I'd be happy to hear what they are!
Thanks for making videos, they're truly excellent!

[@bambamboole1]

awesome video. I think the way you did the animation is totally fine with a speed of .3 secs. We engineers always want to have it perfect. but thats the enemy of done ;)

[@aldoyh]

I'd suggest using GSAP, but that's just me 😁

[@brunoggdev6305]

That is pretty interesting, now I wanna use that

[@PlayerRPG85]

I will steal some of this code for sure!

[@brunoggdev6305]

How can I get that cool wallpaper?

[@Stoney_Eagle]

If I remember correctly the modal has a pseudo selector named backdrop

[@williamxsp]

14:44

[@CRiley-zx1ws]

You mean the selector that was the focus of the video for over a minute.... that one?

[@devmenezes]

Nice wallpaper!