動的モーダルは、Studio CMSで管理しているデータや、Data Connect APIで取得した詳細データを、モーダルウィンドウ内に動的に表示するためのページタイプです。
動的リストやAPIリストなどと組み合わせることで、別ページに移動せずに詳細情報を表示できます。
Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
本記事では、Studio CMSで管理している1件分のデータを「CMSアイテム」、Data Connect APIで取得した1件分の詳細データを「詳細データ」と呼びます。
利用できるデータ
動的ページでは、作成時に接続するデータソースを選択します。
接続できるデータは、以下のデータです。
Studio CMSで作成したCMSモデル
Data Connect APIの詳細エンドポイント
注意：Data Connect APIの詳細エンドポイント取得には、Business Plus以上のプラン契約が必要です。
動的モーダルを追加する
Tips: CMSが初期化されていないプロジェクトでも、有効なAPIの詳細エンドポイントがあれば、動的モーダルを作成できます。
動的モーダル内のボックスにデータを紐付ける
動的モーダルに配置したボックスには、ページに紐付けたデータソースのフィールドを紐付けて、内容を動的に表示します。
Studio CMSではCMSプロパティを、APIでは詳細データのフィールドを利用します。
モーダル内にテキストボックスや画像ボックスを配置します。
紐付けたいボックス要素を選択します。
Studio CMSを使う場合はCMSプロパティを、APIを使う場合は詳細データのフィールドを選択します。
各ボックスに必要なフィールドを紐付けます。
CMSプロパティの詳細な紐付け方法は、デザインエディタで、ボックス要素とCMSプロパティを紐付けるも参照してください。
CMSプロパティごとの挙動や仕様は、CMSプロパティをご覧ください。
動的モーダルをデザインする
他のページタイプと同様に、外観やレイアウト、レスポンシブ設定などのデザインが可能です。
操作方法の詳細は、次のヘルプ記事を参照してください。
詳しくは、モーダルの記事をご参照してください。
パスを利用する
[パスを利用]を有効にすると、モーダルを表示した際に、URLにクエリパラメータとしてモーダルのパスが追加されます。
特定のモーダル表示状態をURLで共有したい場合などに有効にしてください。設定は、右パネル上のページ設定で行います。
詳しくは、モーダルを追加する > パスを利用するの記事を参照してください。
