You can absolutely create scrollable long modal windows in Webflow with a fixed background and semitransparent overlay using some key layout settings and interaction structure.
1. Create the Modal Structure
- Create a div block for the modal wrapper and position it as fixed, full screen (
top: 0, bottom: 0, left: 0, right: 0
). - Set its z-index high (e.g.,
9999
) and background color to rgba(0, 0, 0, 0.5) for transparency. - Inside this wrapper, create another div block for the modal content. This will hold the scrollable content.
2. Enable Scroll for Modal Content
- Set the modal content div to have:
- Fixed width or max-width pattern (e.g.,
600px
or 80vw
) - Max height (e.g.,
80vh
) and overflow: auto - This ensures the modal content scrolls internally while retaining a fixed overlay behind.
3. Center the Modal Content
- Use Flexbox on the modal wrapper (
display: flex; justify: center; align: center
) to center the modal even when viewport size changes. - Scroll behavior will stay inside the modal content div if properly limited with height and overflow settings.
- To prevent scrolling of the underlying page when the modal is open:
- Create an interaction on the modal trigger that:
- Uses the “Page > When Modal Opens” set to
overflow: hidden
on the body
- On modal close:
- Set
overflow: auto
(or visible
) back to the body
5. Add Close Functionality
- Add a close button inside the modal.
- Use Webflow Interactions to hide or scale down the modal wrapper on click.
- Optionally, add a click interaction on the background wrapper (outside modal content) to also trigger the close.
6. Optional Enhancements
- To ensure mobile-friendliness, always test your
vh
height limits since mobile browsers may ignore or miscalculate vh
units due to address bar sizes. - Consider using
calc(100vh - some value)
or dynamic sizing with min-height
for better responsiveness.
Summary
To create a long, scrollable modal window with a fixed semitransparent overlay, use a full-screen fixed modal wrapper with centered modal content set to a limited height and overflow: auto
. Lock background scroll using overflow: hidden
on the body
, and use interactions for opening and closing the modal.