A modal is a popup window that appears on top of the current page without navigating away from it. It's an effective way to draw your visitors' attention to specific information or actions.
Modals can be used for a variety of purposes, such as call-to-action prompts, enlarged image views, sidebars, hamburger menus, and more.
Adding a Modal
Click the [+] button in the upper-right corner of the screen.
You can also add a modal from the [+] button in the Page Panel.
![Screenshot: Showing the [+] button for adding a page.](https://downloads.intercomcdn.com/i/o/xqogzym4/1866784863/4acdea4805f8a191ec99761e0020/page_1.png?expires=1779472800&signature=0c94e03b3d5f60609e6fc763094c887826b01b5e1dbbc773fc1ca9dd3d0308ab&req=dSghEM52mYlZWvMW3nq%2BgX6IYNutwmxiopy4eKaEKjD95pZp7PMVoOSW8OKN%0ApGN3S2qmWJnSQzCDsw%2FFPkf%2BVCY%3D%0A)
When choosing a page type, select "Modal."
Tips: Modal vs. Dynamic Modal
If you want to display content from Studio CMS in a modal, use a Dynamic Modal. Note that you cannot convert a regular modal page type to a dynamic modal.
Designing a Modal
Just like other page types, you can customize the appearance, layout, and responsive settings of a modal.
For detailed instructions, refer to the following help articles:
Tips: When adjusting the fill opacity or other properties of the area outside the modal, use Live Preview to see your changes in real time for a smoother workflow.
Setting Up Scrolling Inside a Modal
Enabling scrolling inside a modal lets you display more content within a limited space. This is ideal for showing content like contact forms or terms of service without requiring the user to navigate to a different page.
For detailed instructions, see How to Set Up Scrolling Inside a Modal.
Adding Transitions (Animations) to a Modal
You can add a transition (animation) that plays when the modal appears.
Transitions are configured by selecting the topmost box in the layer hierarchy (Backdrop).
In the target modal, select the topmost box in the layer hierarchy (Backdrop).
You can use the Layer Panel to view the layer structure and select elements.
Click the [Content] tab in the right panel.
If the panel is closed, open the right panel first.
Click [Transition] and choose the type of display animation you'd like to apply.
Fine-grained adjustments such as display speed are not available.
Setting Up Links to a Modal
Once you've created a modal, you can display it by setting it as a link destination on elements like buttons or images. When a visitor clicks the element, the modal will appear.
You can also add a link to an element inside the modal to close it.
For more details, see Setting Up Links to Open / Close a Modal.
Setting a Path for a Modal (Use Path)
If you want to get a direct URL link to a modal, you can assign a path to it.
This is useful when sharing modal URLs — for example, linking to campaign or event details via email or social media marketing.
Open the Page Settings Panel for the modal page.
At the bottom of the panel, turn on the toggle under [Use Path] to enable it. This is disabled by default.
Once configured, when the modal is displayed on the published site or in Live Preview, the URL will update to end with "m={modal path name}."
モーダルメニュー modal base modalbase ライトボックス