HOW TO: make custom pop up modals in Webflow the easy way
HTML-код
- Опубликовано: 3 авг 2024
- Build your fundamentals in Webflow by learning how to create a custom pop up modal! Links to everything in the description! Help us teach more people by leaving us a like and a comment.
This method of making a pop up modal in Webflow uses the built in interactions. they key parts of the build are that your modal is set to fixed so that it will be in the same spot no matter the scroll position and the z index places it over top of everything else. To make it work we are going to set the contact button as a trigger for the animation and change it from display: none, to display:block. When the pop up is visible we can use opacity to smooth the transition. Same thing in reverse to hide the pop up but set the trigger as the close icon.
Say hello!
Instagram / anansi_creative
Facebook / anansicreativecanada
www.anansicreative.com/
Tools used for this project
webflow.com/
10/10 STILL WORKS GENIUS
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!
thanks man for the video. A few hours later and several replays and I've finally got this section completed!
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!
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!
Thank you! Adding the hide and show helped me out so much! Can't believe I overlooked that small detail.
Thank you Mr!
Really well explained, I never use webflow and without prior knowledge I followed you without any problem.
You deserve a lot more followers, great tutorial and very easy to follow.
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
So clear and helpful. Thank you!
This tutorial is really really really helpful! Very concise and easy to follow. Thank you!
I appreciate that, thanks for watching!!
The explanation is very clear, thank you.
Thank you so much for this video. It has been very helpful!
thanks, easy to follow and very helpful.
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!
Huge help, thank you!
Man you're awesome! Thank you so much for this
Super super good, thank you so much!
Awesome man! Thank you for this!
thank you! just applied this :)
Thank you. This really helps and easy to understand.
You’re welcome, thanks for watching!
Thank you so much. Very helpful!
Very easy to follow and recreate the same. Short tutorial without too much of chit-chat. Following you for such more videos.
This is awesome man! Thank you!!!
You’re welcome, thanks for watching!!
great video! worked a charm! thank you
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..???
Great tutorial! Thank you :)
this was really good thanks so much!!
Thank you for this video.. it helps me so much
But what about the mobile version?
Cheers, well explained. Nice work!
I appreciate that! Cheers
Thank You so much!!! ♥️
You have such a pleasant voice and bg music. Subbed.
Amazing thanks so much! Just copied link over into JS field then into an HTML field on my blog page!
Thanks for this!
we love u webflow guy
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 :)
Thanks for making this effective tutorial
You’re welcome, thanks for watching
Excellent video and explanation
You've just saved me! c:
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
It's fabulous
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
Really useful video, thanks for this
You’re welcome, thanks for watching!!
absolutely work
Thank you!
Thank you so much
This rocks!
Thanks!! I'm glad you like it
great its help me Thanks
Thank You
BLESS YOU
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
Thanks for helpful tutorial. Would you mind to do a video on how to set success message to be a pop up modal?
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!
support you till end
Thanks so much!!
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
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!*
Thanks
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.
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.
Thank you very much ! Do you know how to bring forward an element ? My div block 6 is hidden behing my title
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?
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
Fast, but helpful!
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 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?
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.
That worked, but how can I put the pop up on the highest layer? Z-index or so?
Hi, how to make it responsive for mobile?
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.
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.
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?
would this be sufficient to make a cookie consent form? if not do you have a tutorial on 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.
Does it work for mobile view too?
How can I make instruction pop-ups that remain beside the item they hover over?
I wanna add a small promotional ad in my modal, is that possible?
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 🐈
how do you use voice recognition
I’ve always heard it pronounced ‘mode-L’… rhymes with total. But what do I really know. 🤷♂️ 😊 Great tutorial though.
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.
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?
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
Damn bro slow down on the configuration part, thats the most complex portion.
yes that was too quick
where can I see this now
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
Im confused on how the X closes the modal.
I presume "div" means "division"?? A block that divides??
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!
Please start your video with what you are going to build. I had to find it in the video. Otherwise a nice tutorial. Thanks
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?
🤣😂 I had to set the speed to 1.5 to not get overwhelmed by that too sultry voice. But great tut. 💪
100% of the time, no matter what I put in the form, I have the error message :/
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!! 😎
The video is 8-minute length but it took me almost an hour to follow your steps. It was too fast.
did not work for me...thanks anyway...
Thank you!! This was very useful