Your explanations are really easy to understand and straightforward. It was a challenging problem, but with your explanation, it seems simple and easy to follow. I got a lot of help. Thank you!!!!
great tutorial thanks a lot Derek!! you helped me a lot now during my first project with my first client. you make it look easy and simple. keep it up with tutorials like these!
reat tutorial it was vary usefull and i used it for my website. just one biiiggg question. If you want to make multiple pup-up screens. as for instance for on a website as you showed at 0:30, If you make the effect select the pup-up page it will select all the dive-blocks with the same name to op en acllose. However If i would give every dive-block a different name for every pup-up page then I'll need to manually change al the pup-up screens one by one, if i'll ever have to make an amusement and want to keep it uniform. How do you make connect the button effect to an individual pup-up screen whitout selecting them aa at the same time?
Hi Dimitri, Sorry I thought I replied. Essentially there are two ways around this: 1/ Manual way (coding each element to have the effect) Create a DIV block with a class eg: "popup-content" then each div block will have a unique combo class eg. "speaker 1" , "speaker 2" etc. Have it so that when Button 1 is clicked it will open popup "speaker 1", when button 2 is clicked it will open popup "speaker 2" and so on. Then for the close icon you can just set the class "popup-content" to display none. 2/ Automatic way through CMS This can be achieved through a plugin like: finsweet.com/attributes/modal I hope this helped.
Thanks a lot for this, easy to follow and well explained! I had to do this for a collection (imagine a list of images, and when you click on one of them, the modal shows the image you clicked) would be cool if you showed how to do this same thing but with collections as it's slightly more complex :) Thanks again.
Glad it helped! With collection (CMS) it would be same concept but custom code has to be applied. The best and easiest solution is to use Finsweet Modal :)
There are many ways, but the most simple is to create a seperate "success" page which will have what ever content you want (ie. 2 videos) then once the contact form has been submitted go to the Form settings and add a re-direct link.
Hi, i loved the video. I'm trying to do something like the second example you showed, changing the content of the modal depending on the button that i pressed. How can i do that?
Based on my method (in the tutorial) you will have to make a seperate interaction for opening each unique popup (so make sure to also apply a unique class for each of the open items). As long as you understand the premise of this video and how to make one popup, hopefully you can figure out the rest. Let me know how it goes and if you still get stuck :)
thank you so much for the tutorial! it all worked the first time I opened and closed the modal but didn't work when I click the open button the second time, any advice for this?
Make sure in the interaction to apply to class + the elements to be "All Elements" not "Child" or "Sibling". Let me know if that fixes it. If not please share your read-only link and I can let you know the answer :)
Just follow the premise of this video and if you have different content / profiles. Just apply a separate interaction. I hope this helped. If you need more guidance lmk 🙏
Thanks for the video, it really helped. Question, i am traying to build more than one popup and with different info, which would be the best way to do that?
There are many ways. One is you can use the premise of this tutorial and apply combo classes and unique interactions for each popup. The other is to build in CMS and use custom code like Finsweet solution to achieve this. It depends on your needs. Keep in mind the CMS route will require a CMS plan and the first option might be time consuming depending on how many popup items you have. Hope this helped.
Since this video was filmed a while back - Webflow recently changed their UI slightly, but the display buttons should still be there! Let me know otherwise.
That would be adding a opacity interaction on top of the hide show. So on reveal, I just put it from display none to display flex. You want to do that except also put opacity to 0 then opacity to 100. Hope that helps.
Using the same premise but for the video around 7:45 when I set up the interaction in my case Display:None to Display Flex you can add a delay. Let me know if you want me to make a tutorial on this, perhaps you are after a popup that opens automatically after 10sec? (without clicking any buttons or anything).
Thanks a lot for the tips! I have an issue regarding the slider in modals. The slider doesn’t work correctly in a modal and it seems it’s because the modal display has been set to non. There is code in Webflow community Webflow.require('slider').redraw(); just after to $('.modal-background').fadeIn(); But I have no idea what should I do with it. It doesn’t work in the custom code section. I would appreciate if you could help me with it.
Hey! There are many ways and solutions to do things. In order to trouble shoot correctly can you please provide a screen recording or share me the read only link and I can take a look when I get the time. - Derek
it'd be great if you made a tutorial for how to prevent bg scroll when modal is open, so that when the modal is open, the bg doesn't scroll instead of the modal.
My pop-up-item won't go to the center of the page. The WebFlow interface has been updated. I can still choose flex as in the video but chose align center for both x and y. The pop-up-item remains at the top of the page and also takes up the entire width of the screen. There have been no changes to its size. Any help is greatly appreciated. Thanks.
Hey Jesse, Firstly thanks for watching. I understand your situation and yes when I recorded this video it's using the old Webflow UI. Neverthe less it's the same premise you want to make sure flex is set and positioned centre, centre. This is the parent DIV of "pop-up-item". Just keep in mind everything has to be defined. Let me know how it goes!
@@shiningstar486 Hi, maybe, I don't exactly understood your problem, but make sure that you choose a flex mode not for pop-up-item but for pop-up, the pop-up-item. The pop-up-item block may have the default settings
This is great. But how do you make these buttons more simple and basically disable the '2nd click' because if not then the user is stuck having to click things 2 times which isn't a good experience...a tutorial on this would be amazing I see lots of people wondering the same thing online :)
If I remember correctly, this tutorial is using native Webflow interactions (on click) and BOTH are using first click interaction (no second click interaction). [Interaction 1 eg. Open model button] 1st click to open the popup [Interaction 2 - eg. Cross button] 1st click to close the popup Not sure if I answered this correctly, if not please elaborate :)
Make sure you have the correct element / div block selected. And make sure that when you apply the interaction the correct element is also selected. It should definitely have the display buttons you are after.
Make sure the popup i set to fixed with a min-width 100% max height 100VH (or DVH). If the popup content is taller than the height of the mobile you will need to add a max height eg. 480px and then make the content have a scroll bar by using Overflow Auto.
Thank you so much. This is exactly the tutorial I was looking for. I appreciate the simplicity, specificity, and speed of the tutorial.
You're very welcome! Glad you found it helpful and simple!
This is so helpful! Thank you so much for sharing it!
No problem, glad you found it useful!
Thank you so much! Exactly what I needed :)
You're welcome :)
Thank you so much. This is exactly the tutorial I was looking for Thank you
You're welcome!
Your explanations are really easy to understand and straightforward. It was a challenging problem, but with your explanation, it seems simple and easy to follow. I got a lot of help. Thank you!!!!
Glad it helped! As long as you understand the premise and reasoning you are on your way to become a Webflow Developer / problem solver.
what a great tutorial, thank you very much!
You're very welcome!
Can't thank enough! Very informative bro 🤩
Happy to help!
Very useful and short video instruction! Thank u bro😇
Glad it helped!
great tutorial thanks a lot Derek!! you helped me a lot now during my first project with my first client. you make it look easy and simple. keep it up with tutorials like these!
Awesome glad it helped!
reat tutorial it was vary usefull and i used it for my website. just one biiiggg question. If you want to make multiple pup-up screens. as for instance for on a website as you showed at 0:30, If you make the effect select the pup-up page it will select all the dive-blocks with the same name to op en acllose. However If i would give every dive-block a different name for every pup-up page then I'll need to manually change al the pup-up screens one by one, if i'll ever have to make an amusement and want to keep it uniform. How do you make connect the button effect to an individual pup-up screen whitout selecting them aa at the same time?
Hi Dimitri,
Sorry I thought I replied. Essentially there are two ways around this:
1/ Manual way (coding each element to have the effect)
Create a DIV block with a class eg: "popup-content" then each div block will have a unique combo class eg. "speaker 1" , "speaker 2" etc. Have it so that when Button 1 is clicked it will open popup "speaker 1", when button 2 is clicked it will open popup "speaker 2" and so on. Then for the close icon you can just set the class "popup-content" to display none.
2/ Automatic way through CMS
This can be achieved through a plugin like: finsweet.com/attributes/modal
I hope this helped.
Well done tutorial. Learned what I needed to know. Thanks.
Glad it was helpful!
Thanks a lot for this, easy to follow and well explained! I had to do this for a collection (imagine a list of images, and when you click on one of them, the modal shows the image you clicked) would be cool if you showed how to do this same thing but with collections as it's slightly more complex :) Thanks again.
Glad it helped! With collection (CMS) it would be same concept but custom code has to be applied. The best and easiest solution is to use Finsweet Modal :)
Thank you man I learned it. Can, you make a video how to let play 2 videos after filling out the contact form?
There are many ways, but the most simple is to create a seperate "success" page which will have what ever content you want (ie. 2 videos) then once the contact form has been submitted go to the Form settings and add a re-direct link.
@@dereksiuau thank you, I Got it
Hi, i loved the video. I'm trying to do something like the second example you showed, changing the content of the modal depending on the button that i pressed. How can i do that?
Based on my method (in the tutorial) you will have to make a seperate interaction for opening each unique popup (so make sure to also apply a unique class for each of the open items).
As long as you understand the premise of this video and how to make one popup, hopefully you can figure out the rest. Let me know how it goes and if you still get stuck :)
Bro your channel is amazing! No one goes in-depth like you. Can you please upload regular videos?
Hey thanks for watching - yes I plan too! Keep an eye out.
Can you make video to remove scroll from body when pop up is on ?
Hey I actually recently did this, you can check it out here:
th-cam.com/video/ddKAJdk9CP0/w-d-xo.html&lc=Ugx0XxR8SbTWAZqj6dh4AaABAg
Perfect !
Amazing ! It worked.
very helpful, thanks!
You are welcome!
thank you so much for the tutorial! it all worked the first time I opened and closed the modal but didn't work when I click the open button the second time, any advice for this?
Make sure in the interaction to apply to class + the elements to be "All Elements" not "Child" or "Sibling". Let me know if that fixes it. If not please share your read-only link and I can let you know the answer :)
Great help bud. cheers
Thanks for the reply - cheers!
Thank you this is really helpful
Glad you found value!
But how do I call this modal again with different content? Just like the profiles website you showed.
Just follow the premise of this video and if you have different content / profiles. Just apply a separate interaction.
I hope this helped. If you need more guidance lmk 🙏
Thanks for the video, it really helped. Question, i am traying to build more than one popup and with different info, which would be the best way to do that?
There are many ways. One is you can use the premise of this tutorial and apply combo classes and unique interactions for each popup.
The other is to build in CMS and use custom code like Finsweet solution to achieve this.
It depends on your needs. Keep in mind the CMS route will require a CMS plan and the first option might be time consuming depending on how many popup items you have.
Hope this helped.
@@dereksiuau Thanks for the help, really aprecciate it!
no worries mate :)
When you put a header in your box it automatically enlarges to hold the heading, mine stays the same size?
Can you please clarify with timestamp what you are referring to exactly? Thanks.
Amazing video but hey I cannot find display buttons for when I apply animation to pop-up. Any idea why is it happening?
Since this video was filmed a while back - Webflow recently changed their UI slightly, but the display buttons should still be there! Let me know otherwise.
thanks man that was helpful
Glad to hear it!
how do you show and hide and also fade in at the same time, cant seem to figure that out, nice tutorial btw
That would be adding a opacity interaction on top of the hide show.
So on reveal, I just put it from display none to display flex. You want to do that except also put opacity to 0 then opacity to 100.
Hope that helps.
Could you complement it by showing how to make the pop-up open after 10 seconds, for example?
Using the same premise but for the video around 7:45 when I set up the interaction in my case Display:None to Display Flex you can add a delay.
Let me know if you want me to make a tutorial on this, perhaps you are after a popup that opens automatically after 10sec? (without clicking any buttons or anything).
Thanks a lot for the tips! I have an issue regarding the slider in modals. The slider doesn’t work correctly in a modal and it seems it’s because the modal display has been set to non. There is code in Webflow community
Webflow.require('slider').redraw(); just after to $('.modal-background').fadeIn();
But I have no idea what should I do with it. It doesn’t work in the custom code section.
I would appreciate if you could help me with it.
Hey! There are many ways and solutions to do things. In order to trouble shoot correctly can you please provide a screen recording or share me the read only link and I can take a look when I get the time.
- Derek
Good tutorial, thanks so much!
very cool tutorial , thank you for your work
Thanks glad you found it useful!
it'd be great if you made a tutorial for how to prevent bg scroll when modal is open, so that when the modal is open, the bg doesn't scroll instead of the modal.
Noted!
My pop-up-item won't go to the center of the page. The WebFlow interface has been updated. I can still choose flex as in the video but chose align center for both x and y. The pop-up-item remains at the top of the page and also takes up the entire width of the screen. There have been no changes to its size. Any help is greatly appreciated. Thanks.
Hey Jesse,
Firstly thanks for watching. I understand your situation and yes when I recorded this video it's using the old Webflow UI.
Neverthe less it's the same premise you want to make sure flex is set and positioned centre, centre. This is the parent DIV of "pop-up-item".
Just keep in mind everything has to be defined.
Let me know how it goes!
I'm running into the same issues, could you please elaborate on how to center the pop-up-item after following all the steps?
@@shiningstar486 Hi, maybe, I don't exactly understood your problem, but make sure that you choose a flex mode not for pop-up-item but for pop-up, the pop-up-item. The pop-up-item block may have the default settings
This is great. But how do you make these buttons more simple and basically disable the '2nd click' because if not then the user is stuck having to click things 2 times which isn't a good experience...a tutorial on this would be amazing I see lots of people wondering the same thing online :)
If I remember correctly, this tutorial is using native Webflow interactions (on click) and BOTH are using first click interaction (no second click interaction).
[Interaction 1 eg. Open model button] 1st click to open the popup
[Interaction 2 - eg. Cross button] 1st click to close the popup
Not sure if I answered this correctly, if not please elaborate :)
7.45 why on my webflow there are no dislay button on animation, except i the set as initial state button, my pop up doesnt work
7:46
Make sure you have the correct element / div block selected. And make sure that when you apply the interaction the correct element is also selected. It should definitely have the display buttons you are after.
This is really useful, but it's hard not to laugh whilst you're saying 'I'm gonna add some information about the big chungus' 🤣🤣🤣
Hahaha finally I've been waiting for a comment mentioning the Big Chungus.
I love Aussie humor, great work tho mate already used this on a few builds! Keep em coming please 🙏
Thank you bro
Your Welcome :)
the one and only big chungus hahahahhahahah
love it
Thanks for watching! Gotta mention the G.O.A.T Big Chungus lol.
7.45 why on my webflow there are no display button? the pop up didnt work :(
It definitely should be there! - Just make sure the right div block is selected. LMK!
but in editor all I can see is a full screen modal
It would be best to d this via the "Designer" mode and not the "Editor" mode. If this is not what you are referring too please kindly elaborate.
how to do it on all the buttons at the same time
Make the interaction set to class
doesnt workout well on mobile you scroll infinetelt
y
Make sure the popup i set to fixed with a min-width 100% max height 100VH (or DVH). If the popup content is taller than the height of the mobile you will need to add a max height eg. 480px and then make the content have a scroll bar by using Overflow Auto.
be regular
Oh Chungus, Big Chungus!
@@Shaaffy-zj6te HIS A CHUNKY BOI
Chungus
The one and only :)