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.
This is what I want to achieve: https://ui8.net/products/lineking-icons So when you click the “Full preview” button, the modal is initiated and scrolling can begin.
Any tips or workarounds?
Hey @Zlate I’ve made a few of those on this page when you click a “See All Benefits” button when looking at the different tickets you’ll get a modal.
http://silver-dollar-city-2016-season-passes.webflow.io/
Here is the read-only link: https://preview.webflow.com/preview/silver-dollar-city-2016-season-passes?preview=e1ffd72baadcd29065678ac2b786b793
If you go to the Navigator Panel, you’ll see all the different modals:
Inside of that you’ll see all of the components:
A Modal Section, with a Close button, Modal Background & then the Modal box.
You’ll see that the modal box has overflow: scroll on it (allowing you to scroll it)
Then I added some custom CSS to make sure that the box only scrolls vertically and not from side to side:
<style>
.modal-box {overflow-x:hidden;}
</style>
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. 
Thank you,
Waldo
I think I made it. https://preview.webflow.com/preview/pixel-bazaar?preview=6b3f5c4aa81633c369a64771ccb48227
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.
Hey @Zlate I will make a cloneable project soon of modals for all fellow Webflow-ers to use and practice/learn from and let you know as soon as it’s up. 
Thank you,
Waldo
That would be awesome. Thanks!
Hold tight, I’m almost done with it 
Hey @Zlate
I went really in depth with this Modal Tutorial, I’m working to refine it a bit more, but it teaches you how to build a modal as well as links to a cloneable version of the page.
http://modal-tutorial.webflow.io/
Enjoy!
Waldo
You’ve done so much for the Webflow community by doing this. I’m going to take a look at it now Thank you!
Thank you @Zlate I hope that it’s helpful and I’m excited to see what you create with the new learnings Please let me know if you have any questions.
Waldo
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.
Many thanks!
Nice work @markos84uk it was my pleasure to put this together, I hope that it helps :).
As far as the scrolling part, you’ll need some custom css in the <head> </head> of the site to stop your modals from scrolling left to right.
<style>
.modal-window {overflow-x: hidden;}
</style>
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
Haha, as tempting as it is to even begin to try and play with the 3D stuff… I’ll leave that to the professionals for now.
I’m hoping to get this online in place of my old Wix (
) site before Christmas 
…No pressure then!
You can do it @markos84uk! glad you’re transitioning over to Webflow. Please let me know if you have any other questions, the site is looking great
NOOOOO! 
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…
Hey @markos84uk could you please update your post with a read-only link so that we can help you faster?
How to Share a Read-Only link to my site: Share a read-only link | Webflow University
Thanks in advance! We’ll get it working in no time
Hi Waldo, I’ve just restored it back to how I originally had it…
I’m going to work on these modals once the site is up and running!
This is a previous restored version, and where I got stuck at. It’s going to be something simple, I know!
https://webflow.com/design/penguinsuithire?p=5679653e5e1bd6e13086d3d0