A Dynamic Modal is a page type that dynamically displays detailed data managed in Studio CMS or retrieved via Data Connect API inside a modal window.
By combining it with Dynamic Lists or API Lists, you can show detailed information without navigating to a separate page.
Point: What is Studio CMS?
Studio CMS is a built-in Content Management System that lets you structure, manage, and update content directly within Studio.Design. By combining Models, Items, and Properties, you can centrally manage frequently updated content like blogs and news.
To learn more about how Studio CMS works and how to get started, check out the articles below.
In this article, a single record managed in Studio CMS is referred to as a "CMS Item," and a single detail record retrieved via Data Connect API is referred to as "detail data."
Available data sources
When creating a Dynamic Modal, you choose which data source to connect to.
The following data sources can be connected:
A CMS Model created in Studio CMS
A detail endpoint from Data Connect API
Note: Using a detail endpoint from Data Connect API requires a Business Plus plan or higher.
Adding a Dynamic Modal
Click the [+] button in the upper-right corner of the screen, or the [+] button in the Page Panel.
Select a page type.
By default, only [Page], [Modal], and [Redirect] are shown. Click ">" to expand the options, then select Dynamic Modal.
Choose the data source to connect. If you're using Studio CMS, select a [CMS Model]. If you're using an API, select a detail endpoint.
Click [Create].
Tips: Even if CMS hasn't been initialized in your project, you can still create a Dynamic Modal as long as a valid API detail endpoint is available.
Linking data to boxes inside a Dynamic Modal
You can link data source fields to boxes placed inside a Dynamic Modal so that their content is displayed dynamically.
For Studio CMS, use CMS Properties. For APIs, use fields from the detail data.
Place text boxes or image boxes inside the modal.
Select the box element you want to link data to.
Open the [Data] tab in the Right Panel. If the panel is closed, open the Right Panel first.
If you're using Studio CMS, select a CMS Property. If you're using an API, select a field from the detail data.
Link the appropriate fields to each box.
For more details on how to link CMS Properties, see Linking box elements to CMS Properties in the Design Editor.
For details on how each CMS Property behaves, see CMS Properties.
Designing a Dynamic Modal
Just like other page types, you can customize the appearance, layout, responsive settings, and more.
For detailed instructions, see the following help articles:
You can also set up display animations (Transitions) by specifying trigger conditions.
For more details, see the Modal article.
Using a path
When you enable [Use Path], the modal's path is added to the URL as a query parameter whenever the modal is displayed.
Enable this if you want to share a specific modal state via URL. You can configure this in the page settings in the Right Panel.
For more details, see Adding a Modal > Using a path.
