Animated Popups with 15 LINES OF CODE (no javascript btw)

hey there my gorgeous friends on the internet that's been a minute I want to show you a really exciting feature that's coming to all the browsers that's called pop over API and I'm going to show you how we can create fully animated uh alert message in like 10 lines of code and zero JavaScript and You're Gonna Be by below because it's amazing so if you've ever dealt with like toast messages or pop-ups or if you want to do like a newsletter sign up for like a gdpr thing um you know you have to like create spans and then all the crap to animate it it gets a bit complicated than that you have to deal with like dismissing right adding an X but what if you click on like the backdrop or you're gonna dismiss it then so I'm going to show you how it just purely simplifies everything all right let's get going I always thought it was funny that web developers are like oh I need my coffee I'm like two energy drinks down and I've been awake for like half a half a minute I'm object to the tits I need help how do I fix this alright so what do we need well we need a button and this is gonna act like a trigger for the pop over toggle the pop over there we go that's it safe cool so we got that running and this is aerating out so let's just reset this quickly I'm running it on Astro it doesn't matter it's just as long as it's HTML and CSS you should be good to go cool all right so we have a toggle the popover button right there at the top awesome now I'll just add a class to this imposition that absolute and I'll just drop it in the middle so I can do top 50 sorry half of that left half of that and then I can do translate X and I can do a minus translate X and I can do half of that then I can do the same thing for the Y and that's gonna pop it straight in the middle why cool and then X save perfect nice let's add a cool BG blue Berry Blue and then a padding of Y of two padding X of six I like to go like that that tends up to look nicely in the end and then we'll do a text white and cool we have the button I just want to make it look not horrible box Shadow we can do a shadow as well will do large and then we'll add a cool blue color to it so we'll do Shadow blue 400. cool that looks fine all right so that's just a bit of styling so it doesn't look horrible so the first thing that you need to do is add a Target to it so which pop-up are we targeting so we can say pop over Target is equal to and we can give it the name so I'll just call it popover now this is going to give us a under squiggly a red squiggly because it is still not yet supported by all the browsers alright so just keep that in mind I know it's fun and you want to just implement it but look at that so 114 on Chrome the people at Firefox are waving the White Flag they have no idea how this works and then Edge how is Edge getting more features the Firefox these days you kidding me we all used to laugh at Microsoft and look at us now and Safari as well it has Di which you determine what that means Okay cool so pop over Target on the button and then we'll create a div with the target of popovers I'll just make a div and add a class of Pop over like that oops sorry this should be an ID my apologies it's an idea pop over so it knows what to Target and then I'll just say pop over here like that all right cool and then I'll just add a H1 in here and I'll just say hello so let's test this out and see if it works click and look at that hello Pops on top of it so here's the cool thing about this that the way we used to do it back in the day you'd have to hook up some sort of well you didn't need JavaScript necessarily but you have to do these funny things with uh hidden hidden inputs basically right but check this out the cool bit about this one is that as you can see the text shows up on top if I add a class to this let me just do a padding of like 12 and a background of PG I've read 100 okay it doesn't matter it's gonna look bad but look at that so here's the cool thing it totally doesn't care about the Z index as well so this is always going to pop up on top of it which is fantastic and look if I click anywhere else that's not on the element it's going to soft close that element as well also I can do Escape that's gonna close it so you got the semantic and the HTML like accessibility all all included which is just lovely what else we can do is what if you want to like hook up your own functionality right and maybe you don't want it to close here like that maybe you want like an x button so what you can do is override the pop over here so by default I think it's set on auto but you can change that over to manual like that and now it's not gonna close it's not gonna soft close like this but you can use two JavaScript methods uh to do that with all right so now that we got that going we can start building this out and then I'll show you how we can add the animation as well and just like three lines of code so this is again just so I can style it up a bit so it doesn't look horrible I also have an image here that we're gonna add so let me just bring that in again this is an astro so I'm going to import it in a very funny looking way uh mail from slash mail jpeg cool so let's pop this sucker in there we go and there it is we have a picture cool so again we need to add a class of sorry not a class the ID of popover to this I think I got rid of it pop over save cool boop boop cool okay we got the image um I'm gonna make this a bit shorter as well so I'll just say width of half of the B of let's do your round to the medium text Center and hit save there we go cool maybe maybe a bit bigger oops half of that what's the math someone tell me the bath we'll do that that should be bigger right there we go cool all right so we got that and then I'll do another div and I'll just add some text in here uh we'll do a H1 I'll just say let's learn more about the web there we go that's looking good now you might be wondering it's cool but what about don't we need like a div to also do the background right because we we need something like this before right you do a div and maybe add a position absolute that do top zero left zero and then you make it full with so you can add like a background of gray to it right but you don't need that anymore what you can do is simply go down here now I'm gonna just select it puts a style tag down here and what I can do is just say pop over so I'll grab that and I can just say backdrop now and that's it now you can do a background of rgba I'll do zero zero zero and like 0.6 poof look at that we have a cool backdrop already added in a couple lines of code lovely so there we go I just added a couple more stylings here and this input down here which is just yeah an input and a button and that's it cool all right so we have a backdrop down here now how can we actually animate it um this might change in the future so just be aware with it if it gets updated you can follow me on Twitter I'll tweet about it but what you can do is we'll grab the pop over first like that and then we can do an add symbol and we can say pop over open like that and that's going to allow us to style uh the popover in its open form so if I do background red oops background red like that see it's red but it's only red when this pop-up is being opened up which is quite cool because you can style other properties as well with this pop over open okay so rather than doing a background red of course we're gonna take this off and what I want to do is say opacity one uh because by default what I want to do is put the opacity down to zero so I'm going to say opacity is zero by default and when it gets opened up so when it has the popover open make the opacity one and then what I'll do is just add the transition down here I can say transform I'll do 0.5 seconds and I can also do display so I can do 0.5 seconds on the display and opacity 0.5 seconds and anything else that you want to do you can there we go and I also added a little um cubic bezier here at the ends cool so as you can see the animation out works but the animation in doesn't so I'm not sure if this is going to change uh because in the Box it just shows you need this pop over open so that's quite strange but what you can do to to fix it not to fix it but what works now that I found that works is you can do a keyframe animation so you can go down here and see keyframes so there we go what I did is I just changed the animation to 500 milliseconds and I just did did a Translate Y here and that's it so if we take a look now look at that how cool is that that's just like a couple of lines of code really to have a full pop-up integrated here so yeah that's it hope you enjoyed this little episode I'm definitely gonna switch over to this as soon as there's legit browser support if there's any less JavaScript that we can ship to the client the better and I'm really hoping that we get more features like this coming up soon because uh there are certain things I feel like there are just essential in most websites and it's a bit frustrating to have to deal with these edge cases that as some of these elements might behold so it's nice that we got this I'm looking forward to getting more stuff like this that would be nice uh like a carousel or just like these popular UI components right it would be nice to just kind of have what Chad CN has uh but it is what it is anyway thank you so much again for being here with me and I'll catch you in the next one

Channel: developedbyed

Views: 28,434

Keywords: web development, javascript, web dev, web development 2023, tailwind, popup animation, popup css, animated alert, animated popup, no javascript, css animations

Id: ayCBWCgJ6e0

Length: 11min 18sec (678 seconds)

Published: Thu Jun 15 2023