Thanks so much for the tutorial. Yours is the most concise and the explain is on-point I found for popup tutorial.
@anansicreative4068
4 жыл бұрын
You’re welcome! I’m glad to hear it was helpful
@jamarmartin884
4 жыл бұрын
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.
@norhalishayat7212
3 жыл бұрын
Agree but this channel kinda stop or..???
@stevend2748
Жыл бұрын
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
@MeowfaceMusic
2 жыл бұрын
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
@rocketmotion381
4 жыл бұрын
But what about the mobile version?
@shantikumar4482
2 жыл бұрын
Very easy to follow and recreate the same. Short tutorial without too much of chit-chat. Following you for such more videos.
@shubhamparekh9808
4 жыл бұрын
your explanation it's amazing sir you have teach so easiest way
@rogeliocarson2325
3 жыл бұрын
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 :)
@braydenbjorn9953
3 жыл бұрын
@Rogelio Carson yea, been watching on InstaFlixxer for years myself =)
@raerickson3470
Жыл бұрын
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
@melvynpaulino6183
4 жыл бұрын
This is awesome man! Thank you!!!
@anansicreative4068
4 жыл бұрын
You’re welcome, thanks for watching!!
@stevek4654
2 жыл бұрын
Huge help, thank you!
@claudeball9163
2 жыл бұрын
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.
@carmencuevasjuarez6730
3 жыл бұрын
Thank you!! This was very useful
@colinmumma
3 жыл бұрын
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!
@stanmuller2870
2 жыл бұрын
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.
@jayp.3898
3 жыл бұрын
we love u webflow guy
@kellychacon9125
2 жыл бұрын
You've just saved me! c:
@samueltheogunsola
3 жыл бұрын
Thanks for helpful tutorial. Would you mind to do a video on how to set success message to be a pop up modal?
@Vika243
4 жыл бұрын
Super super good, thank you so much!
@AleksFidurski
2 жыл бұрын
Thank you
@eddiewhatson1800
4 жыл бұрын
Cheers, well explained. Nice work!
@anansicreative4068
4 жыл бұрын
I appreciate that! Cheers
@franci-uz
2 жыл бұрын
That worked, but how can I put the pop up on the highest layer? Z-index or so?
@janineheinrichs6853
4 жыл бұрын
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?
@MeowfaceMusic
3 жыл бұрын
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.
@lofibuttfolk
3 жыл бұрын
BLESS YOU
@ArchBeJeffers
4 жыл бұрын
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.
@anansicreative4068
4 жыл бұрын
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!! 😎
@IvanKreimer
2 жыл бұрын
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.
@keziaisrael
2 жыл бұрын
Is that (modal popup class) to make the pop-up close? I followed the steps but clicking the X does nothing.
@keziaisrael
2 жыл бұрын
I got it, thanks
@caleb5201
Жыл бұрын
@@keziaisrael Hey Kezia, How did you end up getting your X to work?
@keziaisrael
Жыл бұрын
@@caleb5201, I don't remember, but I kept tweaking the numbers until something worked. Sorry I wasn't of more help.
@ZachBoughaffour
5 ай бұрын
why are you whining about free content? go make a better tutorial if you feel so strongly about it
@DavidShantzwildoutwest
4 жыл бұрын
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.
@epicsseven7686
3 жыл бұрын
I had expressed the same issue with Foxycart, who too started off slow and sped everything up.
@jakeballard1188
3 жыл бұрын
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!
@bravenick
3 жыл бұрын
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!*
@irubielmoreno6683
4 жыл бұрын
Damn bro slow down on the configuration part, thats the most complex portion.
@kekekitoko
3 жыл бұрын
yes that was too quick
@victorbuenoleon1021
3 жыл бұрын
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.
@walkeveryday777
Жыл бұрын
try changing the Width of the pop up to 90% when in mobile mode, adjust padding too
@MeowfaceMusic
2 жыл бұрын
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 🐈
@coreyblaser
Жыл бұрын
I’ve always heard it pronounced ‘mode-L’… rhymes with total. But what do I really know. 🤷♂️ 😊 Great tutorial though.
@Emilieho
3 жыл бұрын
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 :)
@mehmedtiro412
8 ай бұрын
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?
@matanuywild2726
Жыл бұрын
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.
@Мойсей-х3о
4 жыл бұрын
Hi, how to make it responsive for mobile?
@parislanuit616
Жыл бұрын
The video is 8-minute length but it took me almost an hour to follow your steps. It was too fast.
@MarcVermeijlen
2 жыл бұрын
🤣😂 I had to set the speed to 1.5 to not get overwhelmed by that too sultry voice. But great tut. 💪
@generationsarising
2 жыл бұрын
How can I make instruction pop-ups that remain beside the item they hover over?
@rodaflow7155
2 жыл бұрын
thanks man for the video. A few hours later and several replays and I've finally got this section completed!
@hogarthheathan
2 жыл бұрын
would this be sufficient to make a cookie consent form? if not do you have a tutorial on it?
@MeowfaceMusic
3 жыл бұрын
I presume "div" means "division"?? A block that divides??
@hrabia8069
Жыл бұрын
Thank You
@mengxiaosong1941
4 жыл бұрын
This tutorial is really really really helpful! Very concise and easy to follow. Thank you!
@anansicreative4068
4 жыл бұрын
I appreciate that, thanks for watching!!
@JSpyx
Жыл бұрын
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!
@andreitrapizonian
Жыл бұрын
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.
@FearfulEntertainment
11 ай бұрын
I wanna add a small promotional ad in my modal, is that possible?
@gwenburns1693
4 жыл бұрын
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
@bigben1144
4 жыл бұрын
Same here nothing is happening for me.
@chefkoch5
4 жыл бұрын
@@bigben1144 Same
@chefkoch5
4 жыл бұрын
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.
@ErikYorgason
4 жыл бұрын
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.
@anansicreative4068
4 жыл бұрын
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
@ErikaK003
Жыл бұрын
thank you! just applied this :)
@barooders1352
3 жыл бұрын
Thank you very much ! Do you know how to bring forward an element ? My div block 6 is hidden behing my title
@unexpectedartofficial
Жыл бұрын
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!
@mauricebeumer8543
3 жыл бұрын
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?
@dubled2765
3 жыл бұрын
did not work for me...thanks anyway...
@jacobcosquer
3 жыл бұрын
You deserve a lot more followers, great tutorial and very easy to follow.
@hattieatthehalley8487
Жыл бұрын
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.
@shantellewright9337
2 жыл бұрын
Amazing thanks so much! Just copied link over into JS field then into an HTML field on my blog page!
@tigerwitch1127
2 ай бұрын
10/10 STILL WORKS GENIUS
@FerdiCildiz
2 жыл бұрын
Awesome man! Thank you for this!
@Joseph-kd3sm
4 жыл бұрын
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?
@anansicreative4068
4 жыл бұрын
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
@Joseph-kd3sm
4 жыл бұрын
@@anansicreative4068 Got it. Thank you!
@ErickAdrianM
3 жыл бұрын
Does it work for mobile view too?
@elias1435
Жыл бұрын
great its help me Thanks
@Goughie
4 жыл бұрын
great video! worked a charm! thank you
@rochbrz4105
3 жыл бұрын
Please start your video with what you are going to build. I had to find it in the video. Otherwise a nice tutorial. Thanks
@tokojajajeje
2 жыл бұрын
absolutely work
@nicolas.mellado
Жыл бұрын
Thank you so much
@planetearth1121
4 жыл бұрын
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.
@anansicreative4068
4 жыл бұрын
Thanks for the feedback, I’ll keep that in mind moving forward
@giombelligilberto
2 жыл бұрын
Thank You so much!!! ♥️
@jaimejimenez2886
2 жыл бұрын
Thank you! Adding the hide and show helped me out so much! Can't believe I overlooked that small detail.
@_________________________.-
Жыл бұрын
where can I see this now
@liblist
2 жыл бұрын
Fast, but helpful!
@superharmonic
3 жыл бұрын
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!
@c7407
2 жыл бұрын
Thank you so much for this video. It has been very helpful!
@TheDeferlys
3 жыл бұрын
100% of the time, no matter what I put in the form, I have the error message :/
@willemprinsloo5663
3 жыл бұрын
Man you're awesome! Thank you so much for this
@YameenKhan-vw1yu
8 ай бұрын
It's fabulous
@poppukonfilm
2 жыл бұрын
You have such a pleasant voice and bg music. Subbed.
@swagatikasahoo1816
2 жыл бұрын
Thank you for this video.. it helps me so much
@Alro1
2 жыл бұрын
Thank you so much. Very helpful!
@KirTitov
Жыл бұрын
The explanation is very clear, thank you.
@daariioomaar
3 жыл бұрын
Thank you Mr! Really well explained, I never use webflow and without prior knowledge I followed you without any problem.
@romarkablebert
3 жыл бұрын
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.
@chunkysons
2 жыл бұрын
did you find a fix for this?
@SadjaOfficial
2 жыл бұрын
this was really good thanks so much!!
@ozgurbakrac
4 жыл бұрын
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.
@anansicreative4068
4 жыл бұрын
I've never had that problem with it, in what way are you being prevented from filling out the form?
@skul1faceee
3 жыл бұрын
thanks, easy to follow and very helpful.
@iddamones9534
4 жыл бұрын
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?
@anansicreative4068
4 жыл бұрын
I’d recommend this article, it goes over reusing animations university.webflow.com/article/reusing-interactions
@emily_burnett
Жыл бұрын
So clear and helpful. Thank you!
@goodseekerinc.633
4 жыл бұрын
Im confused on how the X closes the modal.
@tosolini
4 жыл бұрын
Thanks for making this effective tutorial
@anansicreative4068
4 жыл бұрын
You’re welcome, thanks for watching
@angelnum18
Жыл бұрын
Excellent video and explanation
@FabianAschauer
3 жыл бұрын
Great tutorial! Thank you :)
@joelhart6276
4 жыл бұрын
how do you use voice recognition
@larissacavanagh
2 жыл бұрын
Thanks for this!
@Vikram-Naidu
3 жыл бұрын
Thank you!
@alastair999100
4 жыл бұрын
Really useful video, thanks for this
@anansicreative4068
4 жыл бұрын
You’re welcome, thanks for watching!!
@leo.1268
3 жыл бұрын
Thanks
@binsarsiahaan4877
4 жыл бұрын
Thank you. This really helps and easy to understand.
Пікірлер: 131