動的モーダルは、Studio CMSで管理しているテキストや画像などのCMSアイテムのプロパティを、モーダルウィンドウ内に表示するページタイプです。
CMSリストのアイテムをクリックした際に、別ページに遷移することなく、ポップアップウィンドウ(モーダル)内で追加情報を見せることが可能です。
Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS(Content Management System)機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
動的モーダルを追加する
CMSプロパティを紐付ける
空白のモーダルページに各種ボックス要素を配置してデザインが完了したら、ページ内のボックスにCMSプロパティを紐付けて、コンテンツデータを表示させます。
CMSプロパティの紐付けは、右パネル上の[データ]タブで行います。
詳細は、以下の記事をご覧ください。
動的モーダルをデザインする
他のページタイプと同様に、外観やレイアウト、レスポンシブ設定などのデザインが可能です。
操作方法の詳細は、次のヘルプ記事を参照してください。
詳しくは、以下の記事をご覧ください。
パスを利用する
[パスを利用]を有効にすると、モーダルを表示した際に、URLにクエリーパラメーターとしてモーダルのパスが追加されます。
特定のモーダル表示状態をURLで共有したい場合などに有効にしてください。設定は、右パネル上のページ設定で行います。
詳しくは、以下の記事をご覧ください。


![GIF:動的モーダルを追加する様子。ページパネル上の[+]をクリック、ページタイプの選択、紐付けるCMSモデルの選択、作成ボタンのクリックまでの一連の流れが動画になっている](https://downloads.intercomcdn.com/i/o/xqogzym4/1918164899/f7c13e302d1272dcaa48e9f7131c/dynamic+modal_2.gif?expires=1770137100&signature=a550af1c2aee986c07391a52d352fd08dae96b1d3060e9f31ef1d55900c6a3a8&req=dSkmHsh4mYlWUPMW1HO4zSFfF%2BUq8wy49mheSU7hgyPWGxNMFuRW6zD1dxLM%0AyoE07rHKCEH0p9jONmM%3D%0A)

