How to make a custom MODAL pop-up in Webflow - Webflow Tutorial

hi i'm jason and i teach non-technical people like myself how to build apps without writing one line of code as it says on this website that i'm working on um i've been working on it on a tool called webflow awesome tool thumbs up uh i came across a problem though that was complicated to solve so today i'm going to try and simplify it for you i'm going to show you how to create a modal in webflow uh what's a modal it's like a pop-up window displays in front of your website and deactivates the rest of it so it kind of forces you to engage with it by completing an action or closing it out let me show you an example over here on amy porterfield's website if i click on give me the goods see how the rest of the website goes dark and then this modal pops up here and then you're forced to either subscribe or close out that's what we're going for here and what i want to do on my site here is that's going to pop up when you click this button give me access kind of like the main call to action here uh so when you click that it's going to pop up a modal where you can subscribe so first thing i'm going to do is create the scene when the modal is triggered i want it to look like this where it's got the darkness behind and then the window on top so back in my webflow site here we wanted to darken a bit so let's work on that i'm going to press uh control k here and we're going to look for a div a div block drag it in here right under the body and we want this element to be fixed width so under position fixed this means that it stays put if you scroll around the site now we also want to adjust the size of it to be full width of the screen so we're going to say 100 v w view width 100 vh view height so now it's the full width of the screen um and now let's enter the darkness i'm going to go to my background color black uh i don't want it that black though so transparency here i'll just bring it down a little bit probably like that pretty good um these inputs are showing in front of the darkness so i'm going to adjust that by using the z index we'll just put that to one and that puts the darkness right on top of everything else next up we need to create the window the window that pops up when the user clicks my button here uh give me access uh so let's grab another div that's not what i want oops some interesting uh searches there though uh control k there we go div and we're gonna throw that inside the first one awesome that is totally div this one's going to be a little bit smaller uh something like 600 pixels width and 400 height oh that's wrong again what are you doing you wrong area we want uh size here we go 600 400 uh next i want to center this so i can do this by setting all the margins to auto if i hold shift i can do all four at the same time and i'm going to set the position to absolute and we're going to make it full and that puts it right in the middle but you can't see it other than this little blue line so let's go to the background again background color is white and there it is brb i'm just going to style it a bit uh so let's preview it i'm going to click this little eyeball here uh so two things here one is i only want this to show when the user clicks the subscribe button and two there's no way to x out of here so it's kind of stuck so let's head back to design mode and let's add an x button first thing we need is another div always start with the divs cool we're going to make this absolute and we're going to put it top right where the x button usually is um we also need an actual image of an x actually i already have one that i stole from google here in my photos so we can just take this and throw it right in it blocked him whoa that's too big uh size like 30 maybe yes and some padding yes what where'd it go what [Music] oh i should put the padding on the div that's why there we go how does that look good not good good enough okay um now the fun starts we need to add animations this is where we can tell webflow what to do when the user clicks on stuff so first thing we want to do is just hide our whole setup here because right now it's always showing see it's always showing when i go to the site this is just going to show that's not what i want um so the main div you you would want to name these better but for sake of speed we'll just leave it as the default div block 19 this i want to hide oh cool look there's the website it's back um and next thing we want to do and scroll down to my button give me access we want to add a animation to this button when the button is clicked we want the model to show that's the animation so i can click on the little lightning bolt which is called interactions also animations i think i don't know interactions or animations plus mouse click uh on first click action start an animation timed animation hit the plus button and i'm going to name this cta button now that we're here i'm going to click on my div block 19 because this is what i want to show when you click the button so click plus and i'm going to choose a bunch of stuff you can do here i'm going to use hide show you can see it's hiding and showing div block 19 and down here first i'm going to set an initial state which is going to be hidden so initially my model is hidden add another one i'd show now we're going to make it not hidden imagine that oh there it is so it was hidden now it's not let's preview that okay initial state it's not showing but if you click the button [Music] it shows wow so that's cool it's a little rigid though so let's ease it in easy then you could do that with opacity so i'm going to choose opacity initial state is zero and i'm going to do another one which is going to be 100 so it's going to go from 0 to 100 and there's a little duration option here let's set it to one second so i can exaggerate the opacity so if i click it now oh something happened there was absolutely zero opacity that is because the opacity should come after showing it so we show it and then we ease it in try again what i can't exit out yet we'll have to work on that next but did you see the opacity it kind of took a little while so one second maybe too much put it back to 0.5 what um awesome but the x button we got to work on that so head back now here's my x button here's the div it was in i'm going to save out of here for now and okay let's select that div again go to animations mouse click start an animation we want a new one call it x button now we want to select that uh main div outer div and then we want to hide and show again so this time we're going to hide it hide and we'll do one more for opacity again because we wanted to ease out before it was easing in now it's easing out uh so this goes to zero so now i click it eases in oh x button is not working oh it kind of worked one more thing we got to do there we got to make the cursor into like a little hand so it knows that that thing is clickable so i'm still on that div block so all the way down cursor right at the bottom making a pointer please stop that pretty cool pretty cool i appreciate you watching um this was my first webflow video so if you want to see more webflow let me know in the comments and now that i have this fancy subscribe give me access button go to buildappswithoutcode.com click that button you'll see the fancy model we just made and you can subscribe and as promised you'll get free access to all my best content since i just made this website i don't know how i don't have any subscribers yet so you might even be my first subscriber and i will love you so much thank you and i'll see you on the next one

Channel: Build Apps Without Code

Views: 221

Keywords: Webflow, No-code

Id: tMqbkOHM4D4

Length: 13min 26sec (806 seconds)

Published: Sun Oct 03 2021