Point: What is a modal?
A modal is a popup window that displays additional information layered on top of the current page without navigating away. If you want to use content data created with Studio CMS, use a dynamic modal.
By enabling scrolling inside a modal, you can display a large amount of information within a single modal. This gives your site visitors the benefit of browsing content without having to navigate to another page.
Setup steps
1. Configure the modal
From the Page Panel, open the modal page you've already created.
Select the box that contains your content.
Set the content direction to [Downward ↓] and the alignment to [Center, Top-aligned].
With the content box still selected, open the right panel and go to the [Box] tab. If the right panel is closed, open it first.
Set the overflow setting to [Vertical Scroll].
*The scrollbar that appears at this point is only shown in the editor for preview purposes during editing.
2. Set up links
Configure the link to open the modal and the button to close it.
For detailed steps, see How to set up links to a modal.
3. Test the behavior
Use Live Preview to verify that scrolling works correctly.
If you were editing a published site, update your site from the Publish Panel. Your changes won't appear on the live site until you update it from the Publish Panel.
If scrolling isn't working
Scrolling won't work if the modal's height is set to [auto] or [flex]. Change it to a [%] or [px] value, making sure it doesn't exceed the height of the top-level box (Backdrop) on the modal page, which should be set to 100%.
Note: When using a [px] value, scrolling may not work in environments where the viewport height is shorter (such as on devices with narrow screens or when developer tools are open).