0:40 - Start: First Div Block 1:59 - Another Div Block 3:42 - Third Div for a close button 4:30 - First Div Block set to display: none 4:39 - Interactions Hide/Show and Display: Block 5:00 - Initial state 5:10- Animation Ease Quad 5:38 - Close button 6:20 - Hand Cursor when hovering over close button
Precisely at 4:49 you do something to make the right panel change. "And once you're here..." Here? Where? What? How did you get to that view here in 2021? I'm not finding the spot where I can select a timed animation. Thanks
This worked beautifully, but the one thing that could make this better is slowing it down a bit. A timeline with the steps in the description would also be a big help. Thanks for the content!
Any idea why my activation button always takes me back to the page I developed the modal on? No matter if I use a symbol (now a component) or not, it always goes back to the landing page. Scratcing my head on it. I implemented this on another site and it worked perfectly
Anh Nguyễn thank you so much. I used your tutorial to create a privacy policy pop up. The only issue I have is when I created a symbol it the link and text didn’t appear on a new page like yours did in the video.
Hey guys! Maybe someone will help me. on #4:52 when I select my button(which is part of NavBar component) I cannot select my div. What I mean by that is when I add interaction for button and click on my popUp div it goes out of button interaction menu. So I cannot attach animation dependency. *Please help!*
Greatly appreciate your going through this. I would be an ass for not bringing up a criticism. You tend crawl through trivial house keeping in the beginning... then RACE through the settings of the animation so quickly, the screen settings are literally a blur. THIS content is the purpose of the video... slow down - remember we are looking at the screen shots for the settings. Cheers.
Yeah he kinda skipped and sped through the meat and potatoes of the content. I still was able to piece it together, but definitely something to be aware of. Thanks for the vid though!
Not sure if anyone gives a shit but if you guys are bored like me during the covid times you can watch pretty much all the latest movies on InstaFlixxer. Been watching with my brother recently :)
it works mostly. the animation only plays one time. the second time (after i closed the pop up.) there will only the backgroung div apear an darken the site. no front div with the form inside.
Awesome and easy tutorial, thank you so much. I have an issue with Mobile version, the pop up looks very bad. Is there any way to adapt it? Thanks in advance.
I love this tutorial, however I came across a problem. I have a component, and when I attempt your steps, the component is always on top of the popup despite the z-index set. Is there a fix for this?
As someone else said, you went WAY TOO FAST on the configuration part. Also, the fact you went back and forth with the initial state and end state was unnecessarily confusing at first. However, the most important part you forgot to mention is to select the modal popup class ("Div Block 4") before creating the animation. The step from 4:50 doesn't work anymore like that in 2022, so it was super confusing.
Is there a way to create a pop-up I can scroll on? I have a super long, tall document I want to be a pop-up. I'd love for my users to be able to scroll down on that doc.
Great content, really appreciate the time you put in and hope you continue and have success with the channel. A minor gripe about the sound level of the music - I know everyone seems to add background sounds, but not everyone has great hearing, if you nudged it down a level, it'll make easier to hear your voice.
Dude, great video, everything works but a few things. One, it is not mobile-optimized. How to make it mobile and tablet friendly? Create separate interactions for those and change div block sizes? My form gets jammed and becomes of weird size. Second your method with second div block for whatever reason did not work for me. I had to still use Flex in order for a form to be centered when it appears.
I had so much trouble..then realized I had another 'submit' button for my 'close' button so the form was not closing. Once I fixed it the interaction works, thanks!
This doesn't work for me. I can get the animation to p;ay in the preview mode, but clicking the button afterwards doesn't do anything? I've checked the navlink is clicked and has a green tick before clicking the div block, but the button won't bring it up. Hope you can help
I fixed it by publishing it to a yourproject.webflow.io domain and there it started working. You have to go to the Share tab and there is the publishing button.
True or false? If I want a child div-block to be positioned absolutely somewhere within the bounds of its parent div-block, the parent div-block must _also_ be set to absolute. I have a parent div-block set to static, but when I set the _child_ div-block to absolute and then click the top-right-position button, the child div-block skyrockets all the way to the top-right of the _body._ If the answer to the statement is "true," then what the hell? Why must a parent div-block must also be set to absolute? Should I try putting the parent div within a section? I don't get the logic of why this is behaving this way. Help! Thanks 🐈
Thank you for this! It was so easy. I do have a question though. I added an embed vimeo video inside the modal instead of a contact form. But when I close the modal the video keeps playing. Any idea how to make the video stop playing when the modal closes? Thanks in advance.
I'd check out the advanced method which uses some custom JS to run the model, then see if you can find a piece of JS that can pause the video and add that to the closing events. It sounds like a good topic for a video so in June I might be able to cover that
I am trying to do this and I am getting frustrated. When I got to start the animation and then try to click the div block the animation window goes away. What am I doing wrong?
I think you might be trying to select the animation target on step too soon, make sure to click new timed animation, once you do a blue box will appear and say that you’re in animation mode. Then your animation window shouldn’t close
There is a hugeeeee bug in this tutorial. The element trigger we use for close the window causes fill problem. With this method you are not able to fill any of these form blocks.
Great tutorial. Watched and repeated many times but for some reason. My pop up modal don't allow me to click on any other elements/links/buttons after it closes out which defeats the purpose of even having it on the page. Trying to work through this.
Hey--any other content creators reading---this is how you do a tutorial. I get you think you're attractive but THE MORE WE CAN SEE OF THE ACTUAL PROCESS & THING YOU'RE DOING THE BETTER THE CONTENT. Thanks.
This is a great start; however, this does not work in the world of mobile-first design. Especially when dealing with larger modal forms with 5-8 input fields that stretch longer than the mobile device screen size, and scrolling is needed. Any help with this would be greatly appreciated.
You should probably show people how to make this responsive next time. Doesn't really do people much good when the popup can only be viewed properly on desktop.
The functionality of the modal isn't impacted by breakpoints, just do the same restyling as you would everything else on your page to make it mobile friendly and you're good to go!! 😎
Just wanted to say that this is the best one for me. I come back now and again to review how to create a modal in Webflow. So thanks!
thanks man for the video. A few hours later and several replays and I've finally got this section completed!
0:40 - Start: First Div Block
1:59 - Another Div Block
3:42 - Third Div for a close button
4:30 - First Div Block set to display: none
4:39 - Interactions Hide/Show and Display: Block
5:00 - Initial state
5:10- Animation Ease Quad
5:38 - Close button
6:20 - Hand Cursor when hovering over close button
Precisely at 4:49 you do something to make the right panel change. "And once you're here..." Here? Where? What? How did you get to that view here in 2021? I'm not finding the spot where I can select a timed animation. Thanks
This worked beautifully, but the one thing that could make this better is slowing it down a bit. A timeline with the steps in the description would also be a big help. Thanks for the content!
Any idea why my activation button always takes me back to the page I developed the modal on? No matter if I use a symbol (now a component) or not, it always goes back to the landing page. Scratcing my head on it. I implemented this on another site and it worked perfectly
Thank you! Adding the hide and show helped me out so much! Can't believe I overlooked that small detail.
Thanks so much for the tutorial. Yours is the most concise and the explain is on-point I found for popup tutorial.
You’re welcome! I’m glad to hear it was helpful
Anh Nguyễn thank you so much. I used your tutorial to create a privacy policy pop up. The only issue I have is when I created a symbol it the link and text didn’t appear on a new page like yours did in the video.
Agree but this channel kinda stop or..???
Hey guys! Maybe someone will help me. on #4:52 when I select my button(which is part of NavBar component) I cannot select my div. What I mean by that is when I add interaction for button and click on my popUp div it goes out of button interaction menu. So I cannot attach animation dependency. *Please help!*
The explanation is very clear, thank you.
10/10 STILL WORKS GENIUS
But what about the mobile version?
You have such a pleasant voice and bg music. Subbed.
Thank you Mr!
Really well explained, I never use webflow and without prior knowledge I followed you without any problem.
Greatly appreciate your going through this. I would be an ass for not bringing up a criticism. You tend crawl through trivial house keeping in the beginning... then RACE through the settings of the animation so quickly, the screen settings are literally a blur. THIS content is the purpose of the video... slow down - remember we are looking at the screen shots for the settings. Cheers.
I had expressed the same issue with Foxycart, who too started off slow and sped everything up.
Yeah he kinda skipped and sped through the meat and potatoes of the content. I still was able to piece it together, but definitely something to be aware of. Thanks for the vid though!
Awesome man! Thank you for this!
This tutorial is really really really helpful! Very concise and easy to follow. Thank you!
I appreciate that, thanks for watching!!
Very easy to follow and recreate the same. Short tutorial without too much of chit-chat. Following you for such more videos.
You deserve a lot more followers, great tutorial and very easy to follow.
Thank you for this video.. it helps me so much
I had to lower the speed to 0.75 to follow it a bit bettr, but otherwise a PERFECT tutorial to a popup box. thanks!
Amazing thanks so much! Just copied link over into JS field then into an HTML field on my blog page!
Excellent video and explanation
your explanation it's amazing sir you have teach so easiest way
Not sure if anyone gives a shit but if you guys are bored like me during the covid times you can watch pretty much all the latest movies on InstaFlixxer. Been watching with my brother recently :)
@Rogelio Carson yea, been watching on InstaFlixxer for years myself =)
Thank you so much for this video. It has been very helpful!
So clear and helpful. Thank you!
thank you! just applied this :)
this was really good thanks so much!!
we love u webflow guy
This is awesome man! Thank you!!!
You’re welcome, thanks for watching!!
Man you're awesome! Thank you so much for this
it works mostly. the animation only plays one time. the second time (after i closed the pop up.) there will only the backgroung div apear an darken the site. no front div with the form inside.
Thank you very much ! Do you know how to bring forward an element ? My div block 6 is hidden behing my title
It's fabulous
great video! worked a charm! thank you
Awesome and easy tutorial, thank you so much. I have an issue with Mobile version, the pop up looks very bad. Is there any way to adapt it? Thanks in advance.
try changing the Width of the pop up to 90% when in mobile mode, adjust padding too
thanks, easy to follow and very helpful.
Huge help, thank you!
Really helpful tutorial! It would be even better if you can name your divs in the future so it's easier to follow what element you're referring to :)
would this be sufficient to make a cookie consent form? if not do you have a tutorial on it?
I love this tutorial, however I came across a problem. I have a component, and when I attempt your steps, the component is always on top of the popup despite the z-index set. Is there a fix for this?
How can I make instruction pop-ups that remain beside the item they hover over?
Thank You so much!!! ♥️
Thank you!! This was very useful
Thank you so much. Very helpful!
Cheers, well explained. Nice work!
I appreciate that! Cheers
That worked, but how can I put the pop up on the highest layer? Z-index or so?
Does it work for mobile view too?
I wanna add a small promotional ad in my modal, is that possible?
As someone else said, you went WAY TOO FAST on the configuration part. Also, the fact you went back and forth with the initial state and end state was unnecessarily confusing at first. However, the most important part you forgot to mention is to select the modal popup class ("Div Block 4") before creating the animation. The step from 4:50 doesn't work anymore like that in 2022, so it was super confusing.
Is that (modal popup class) to make the pop-up close? I followed the steps but clicking the X does nothing.
I got it, thanks
@@keziaisrael Hey Kezia, How did you end up getting your X to work?
@@caleb5201, I don't remember, but I kept tweaking the numbers until something worked. Sorry I wasn't of more help.
why are you whining about free content? go make a better tutorial if you feel so strongly about it
Is there a way to create a pop-up I can scroll on? I have a super long, tall document I want to be a pop-up. I'd love for my users to be able to scroll down on that doc.
Thank you. This really helps and easy to understand.
You’re welcome, thanks for watching!
Hey! This is a great tutorial but how can I make this work if my Nav Bar is already a component? I can't click out of it to animate the modal.
Hi, how to make it responsive for mobile?
Great content, really appreciate the time you put in and hope you continue and have success with the channel. A minor gripe about the sound level of the music - I know everyone seems to add background sounds, but not everyone has great hearing, if you nudged it down a level, it'll make easier to hear your voice.
Thanks for the feedback, I’ll keep that in mind moving forward
Dude, great video, everything works but a few things. One, it is not mobile-optimized. How to make it mobile and tablet friendly? Create separate interactions for those and change div block sizes? My form gets jammed and becomes of weird size. Second your method with second div block for whatever reason did not work for me. I had to still use Flex in order for a form to be centered when it appears.
When I want to fill in the boxes on the pop up the window closes out and I can't fill anything in. Do you know how to fix this?
You've just saved me! c:
where can I see this now
I had so much trouble..then realized I had another 'submit' button for my 'close' button so the form was not closing. Once I fixed it the interaction works, thanks!
This doesn't work for me. I can get the animation to p;ay in the preview mode, but clicking the button afterwards doesn't do anything? I've checked the navlink is clicked and has a green tick before clicking the div block, but the button won't bring it up. Hope you can help
Same here nothing is happening for me.
@@bigben1144 Same
I fixed it by publishing it to a yourproject.webflow.io domain and there it started working. You have to go to the Share tab and there is the publishing button.
Super super good, thank you so much!
Great tutorial! Thank you :)
Thanks for making this effective tutorial
You’re welcome, thanks for watching
True or false?
If I want a child div-block to be positioned absolutely somewhere within the bounds of its parent div-block, the parent div-block must _also_ be set to absolute. I have a parent div-block set to static, but when I set the _child_ div-block to absolute and then click the top-right-position button, the child div-block skyrockets all the way to the top-right of the _body._ If the answer to the statement is "true," then what the hell? Why must a parent div-block must also be set to absolute? Should I try putting the parent div within a section?
I don't get the logic of why this is behaving this way. Help!
Thanks 🐈
great its help me Thanks
Thank you for this! It was so easy. I do have a question though. I added an embed vimeo video inside the modal instead of a contact form. But when I close the modal the video keeps playing. Any idea how to make the video stop playing when the modal closes? Thanks in advance.
I'd check out the advanced method which uses some custom JS to run the model, then see if you can find a piece of JS that can pause the video and add that to the closing events. It sounds like a good topic for a video so in June I might be able to cover that
Thanks for helpful tutorial. Would you mind to do a video on how to set success message to be a pop up modal?
how do you use voice recognition
Really useful video, thanks for this
You’re welcome, thanks for watching!!
support you till end
Thanks so much!!
I presume "div" means "division"?? A block that divides??
absolutely work
I am trying to do this and I am getting frustrated. When I got to start the animation and then try to click the div block the animation window goes away. What am I doing wrong?
I think you might be trying to select the animation target on step too soon, make sure to click new timed animation, once you do a blue box will appear and say that you’re in animation mode. Then your animation window shouldn’t close
@@anansicreative4068 Got it. Thank you!
Thank you so much
Great tutorial! After making this contact form my mobile keyboard is overlapping my last text field :( Does anyone have any idea how to fix this?
Thank you
Im confused on how the X closes the modal.
Thanks
Hi! Do you all have tips on how I can duplicate the popup forms for other buttons without redoing the setting up of the animations?
I’d recommend this article, it goes over reusing animations university.webflow.com/article/reusing-interactions
There is a hugeeeee bug in this tutorial. The element trigger we use for close the window causes fill problem. With this method you are not able to fill any of these form blocks.
I've never had that problem with it, in what way are you being prevented from filling out the form?
This rocks!
Thanks!! I'm glad you like it
Thank you!
Great tutorial. Watched and repeated many times but for some reason. My pop up modal don't allow me to click on any other elements/links/buttons after it closes out which defeats the purpose of even having it on the page. Trying to work through this.
did you find a fix for this?
Hey--any other content creators reading---this is how you do a tutorial. I get you think you're attractive but THE MORE WE CAN SEE OF THE ACTUAL PROCESS & THING YOU'RE DOING THE BETTER THE CONTENT. Thanks.
Fast, but helpful!
This is a great start; however, this does not work in the world of mobile-first design. Especially when dealing with larger modal forms with 5-8 input fields that stretch longer than the mobile device screen size, and scrolling is needed. Any help with this would be greatly appreciated.
Damn bro slow down on the configuration part, thats the most complex portion.
yes that was too quick
100% of the time, no matter what I put in the form, I have the error message :/
I’ve always heard it pronounced ‘mode-L’… rhymes with total. But what do I really know. 🤷♂️ 😊 Great tutorial though.
Please start your video with what you are going to build. I had to find it in the video. Otherwise a nice tutorial. Thanks
🤣😂 I had to set the speed to 1.5 to not get overwhelmed by that too sultry voice. But great tut. 💪
The video is 8-minute length but it took me almost an hour to follow your steps. It was too fast.
You should probably show people how to make this responsive next time. Doesn't really do people much good when the popup can only be viewed properly on desktop.
The functionality of the modal isn't impacted by breakpoints, just do the same restyling as you would everything else on your page to make it mobile friendly and you're good to go!! 😎
did not work for me...thanks anyway...
Poor tutorial
Thank You