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
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.
❤ 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. ❤
Jeffrey Por que no utilizas el logo de la "A" de laracAsts como el avatar de tu canal en UA-cam, 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...
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!
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.
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.
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.
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., ).
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 ;)
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
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);
}
}
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.
Thanks, Jeffrey for the video. By far the best solution for modals IMO
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.
Heads up, a 4k version is still transcoding. Should be available shortly.
❤ 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. ❤
Jeffrey Por que no utilizas el logo de la "A" de laracAsts como el avatar de tu canal en UA-cam, 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...
Repo?
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!
This is a gem. Thanks.
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.
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.
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.
Whoaaaa, I have never used the ::backdrop pseudo-element - always have an 'inset-0' extra div. Awesome! 🙉
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., ).
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 ;)
may I know what kind of theme do you use in your phpstorm?
I will steal some of this code for sure!
That is pretty interesting, now I wanna use that
Nice wallpaper!
How can I get that cool wallpaper?
If I remember correctly the modal has a pseudo selector named backdrop
14:44
You mean the selector that was the focus of the video for over a minute.... that one?
I'd suggest using GSAP, but that's just me 😁