Since there are not yet native modal windows in Webflow, I see there are many workarounds. The ones I need designed are modal windows that are rather long (3000+ px), so they need to be scrolled, while the site’s content in the background (though covered with semitransparent overlay) should stay fixed.
Then I added some custom CSS to make sure that the box only scrolls vertically and not from side to side:
I have interactions set on the buttons to display the section, and then interactions on the close button and the modal background to make the modal go away.
To bind the modals to the buttons, I had to give each modal section parent container a different name, and create a different interaction (I could have nested the button & the modal pieces inside of a div as well so that that the interactions were binded to sibling elements but didn’t at the time).
Please let me know if you have any questions or need further assistance creating a scrollable modal.
There are certain bits and bobs that I like to fine-tune, but in overall it works. For example, I think there was some advanced CSS rule to hide the actual scroll, yet the user to be able to scroll down.
Also I didn’t understood the logic behind creating the modals in such a way so that you can trigger them as siblings, but I guess I’ll need to learn some more tutorials about it. I might end up having about 10 modals, so I’d better use to reuse the code beforehand.
When I read these tutorials, I like to close them and try to do them from memory so if I make mistakes I can try and understand why it went wrong.
This was great @Waldo, thank you so much! The time and effort you have gone to for the community is amazing, and I’m loving being a small part of it.
I’ve used the modals so far on Contact and Dream Days links if you’d let me know what you think, http://penguinsuithire.webflow.io your opinion would be greatly appreciated! I just need to tinker with the scroll functionality a bit more, especially for the mobile versions.
I would also maybe style the close button to be a bit more apparent, it took me a little bit to find, and clicking the background didn’t close the modal either. If you see in the tutorial I walk through how to add a background element behind the modal which can have an interaction applied to make the modal close.
Your site is looking great! I love the Dream Days modal :). Let me know if you have any other questions please
Thank you for that code, I’ve put it in, and also changed the CLOSE buttons to make them easier to see.
I’m assuming that the “.modal-window” would be changed to the class of whatever the window is called, and I would paste this code several times for different window names changing the class name each time?
My pleasure. If you refer to the tutorial above (where the modal is a sibling element to the button which launches it), you should only have to make one class & one set of interactions that will work for all modals :). Using the interaction to affect Sibling elements only.
But yes, the overflow-x: hidden style can be used on any element/class.
Nice close buttons! It looks like there is -17px top of the close buttons, I changed them in inspector to have a position of top 10px, right 10px, and it sits very nicely within the modal.
It does! I’ve put 10px top and right on all formats and sits great, thank you.
I think I’m going to need to start the modals again, which isn’t a problem as I only have two so far, so will be easier to do this now than later. I’ve also just learnt more about z-indexes too and mine are all over the place!
Your Silver Dollar City site looks amazing by the way!
Thanks @markos84uk it was a fun page to build, with Webflow I was able to finish that page in just a few days.
When I think of Z-Indexes, I just think of them as layers (similar to layers in Photoshop), then you can also run into stacking contexts (think of these as a folder with layers inside of it). Then throw 3D Transforms in there, and it gets all kinds of crazy haha. I plan on making some 3D modals soon
I deleted my original modals to do it the way you suggested, and I can’t get it to work. I’ve pasted the code in, my class names are the same and match up, and I’m trying to set up the open interaction with no joy. I haven’t added the close button yet.
Any help would be appreciated if you get chance. I’ll keep at it though…