How to Webflow: Create a custom modal (2019) - Tutorial
HTML-код
- Опубликовано: 27 сен 2019
- Here is how to create a fullscreen custom modal as well as a right bar slide out modal using Webflow interactions.
#webflow #tutorial #webdesign
See more Webflow resources at: theoverflow.io
Join the Pixel Geek Community:
pixelgeek.community
-------
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
ruclips.net/user/subscription_...
-------
/ thepixelgeek
/ pxlgk
pxlgk.com 
Хобби
![NoCap - Maliboo [Official Music Video]](http://i.ytimg.com/vi/FUV7E0QyniU/mqdefault.jpg)
The best webflow teacher from south park!
Thank you for your tutorials :)
Thank you so much! This took me a while to do but it works! Somewhere I got stuck on that might help someone else: I had already made my nav bar a symbol before adding this modal which caused issues when I tried to add the interactions.. I solved this by putting the modal inside the nav bar symbol and underneath it.
Thank you! This was GREAT and so easy to follow.
Your videos are so helpful!!! Thank you!
Amazing tutorial man - thanks so much!
My pleasure. Thanks for watching 😁🙇🏽♂️
Great tutorial, thanks bro
Life saver, thanks bro!
Fantastic tutorial! Thank you so much.
Glad it was helpful!
Thanks a lot, Really Helped a lot.
Thanks for making this video, really helps the community. A +++
my pleasure. :) Thanks for watching.
Fantastic. Very helpful!
Glad it was helpful!
great, man. keep going.
Thanks for your support
Thank you, great tutorial! Really easy to follow along, love your content!!
One thing I didn't get out of your tutorial that might help others (since it took me a few days to figure out!) was that if your modal is triggered from the navigation, and you add that symbol to other pages, it won't work unless you turn the modal into a symbol and add it to every page too.
Good point. I'll make sure to make a note of that on future videos 😁
Question: If I made the navigation a symbol (which I commonly do, because whoa yeah!) then the modal would work on every page too, or not??
@@lynnemarie7885 hello! i guess that in this way it will work only if you put the same modal (or at least the same class of the modal) to the page you wanna show the modal. But make sure first that this one be a symbol :)
so many thx! you help me so much!
My pleasure 😁🙇🏽♂️
Thanks so much!
my pleasure :)
got to make these bad boys accessible 🤯
Webflow 4 Life
This works great, thank you! I have one problem. Do you know why when I add sections or elements to the page, I am not able to scroll. Is there a way to fix this? Thanks again...
Awesome. Really helpful, but... If the contents in the modal makes it (the modal) taller then the screen size there is a problem. I would like to be able to scroll the page, not inside the modal, to explore the entire modal. Solutions?
I wish you would show what you are making at the start of the video to give context.
Thanks for that feedback. I'll make sure to do that with all videos going forward. 🙇🏽♂️
@@pixelgeek Thank you :)
Hi, do you have any advice for positioning over a sticky navbar?
@pixelgeek I have a problem scaling this modal for my mobile version of my website, any tips? Great tutorial btw.
Thanks for reaching out. I don't have much time to help with direct support requests. But this is why I'm making a community website and chat board. Please consider joining the email list and when it launches, you'll be able to ask questions there.
Https://pixelgeek.community
Hi, great to have you making videos again! is there a way to only have the modal come up once per user? Not every time a user com3s to the website? Cookies or age verification for example? Thanks!
Sure. I'll do a video of that soon 😁👍
Sounds great, thanks! ✌️
here you go :) ruclips.net/video/_y0zPEAFvJc/видео.html
I have a modal setup and have a jotform embedded but it appears that when i publish the site, the embedded form shows up on mobile fine, but on desktop its just the empty container. Any idea what the issue might be? Thanks.
Thanks a lot - I was able to design my popup, but how to make the 'close intent' as a trigger? I want this popup to show up on exit intent.
hmm.... what would be on the popup? I'm generally not a fan of exit intent pop ups. It's just like when you go to the gas station and all you want to do is pump gas, but then the screen asks "do you want to pay with credit or debit?" then "do you want a receipt?" then "do you want a car wash?" then "do you want to buy a soda?"
it gets annoying 😬
@@pixelgeek it might be annoying but exit popups convert best. 90% of visitors will never come back to your website and this is your last opportunity to capture their email in exchange for something valuable. My exit popup is simply "Subscribe to my blog to download my Branding Guide" with just an email field and a button.
@@ebaqdesign I'm sure there is a way but Google frowns on that...bad for SEO
I gotta re do mine. I keep following your steps but something messing up with the animation. When I hit the close button to hide the module it's as if it's just invisible but the form is still on the screen and it wonn't let me hit no other links or buttons on the actual home page. Even the navigation bar is unavailable. But when I click around I keep seeing required pop up meaning the modal is still there but invisible. Ugh.
If the button to open the modal is in the nav, then in other breakpoints, how can I trigger the hamburger menu drawer to close when the modal opens? Any way to do it without code?
can you give me a read-only link to your project so I can further investigate this?
When creating the extra background div I tried just setting the original modal to 999 z index and the content to 9999 thinking that way I wouldn't need the extra div - but it didn't work (your way does though!). Why is that?
can you send me your read only link so I can check it out?
When we have multiple sections and the collection list is in the last section, how can we show modals with fixed position?
Did you figure this out? Thanks
@pixelgeek how to set it to pop up when the web-side is loaded ? thank you for your time
To be honest, don't do this. There's already too many pop ups on the web.
@@pixelgeek thank u , how would you solve it , it's for a client I did the web design for , and now need a pop up to announce a Christmas and new year take a way dinner, thank you for your time and feedback
I would suggest adding it to the homepage as a new section under the hero row
@@pixelgeek Thank you for the suggestion :-)
Hey, how to widgets automatically product sale tutorial? scroll into view or while scroll?
i'm not sure what you mean. Can you give me an example of what you're talking about?
@@pixelgeek www.creativebloq.com/web-design/parallax-scrolling-1131762
Automatic window (popup modal)
What if when click the submit button, the form will disappear?
Hi man, I've got a problem which you can maybe help me with: I have made a modal on my website which works. However, when closing it, all of my buttons on the webpage don't work unless the website refreshes. Do you know how to solve this?
Make sure your modal wrapper is set to display none when you close it.
Hope this helps 😁
hello bro! hey, i heard that theres a webflow group! how can i join to that group? that´s awesome!
There are many groups. Which one are you specifically talking about?
@@pixelgeek idk hahaha, i heard in the video you said that one person asked you some improvements and then you work like a master on it
Are you taking about joining my live streams? If so, I stream every so Saturday at 10am pacific
Can you please make a cookie notification pop up ?
Will do 👍
here you go :) ruclips.net/video/_y0zPEAFvJc/видео.html
when i click 2nd time on the button to open the modal 2nd time, nothing happens, why is that?
can you post your read only link so I can look into this?
@@pixelgeek i made it :D it was something with the flex and none option in the animation. thanks for tutorials, i learned a lot!
Glad you figured it out 👍
Hi Joe - I have this same issue - mind sharing your solution?
@@jakev9355 i followed also these instructions, similar but worked for me
ruclips.net/video/bNVwW8-BymU/видео.html