メインコンテンツにスキップ

ページタイプ:動的モーダル

動的モーダルは、Studio CMSのアイテム内容をモーダルウィンドウ内に動的に表示するためのページタイプです。 ​ CMSリストなどと組み合わせることで、ページ遷移を行わずに詳細情報を表示する用途で利用します。

昨日アップデートされました

動的モーダルは、Studio CMSで管理しているテキストや画像などのCMSアイテムのプロパティを、モーダルウィンドウ内に表示するページタイプです。​

CMSリストのアイテムをクリックした際に、別ページに遷移することなく、ポップアップウィンドウ(モーダル)内で追加情報を見せることが可能です。

GIF:動的リスト内のアイテムをクリックして、リンクされた動的モーダルが表示される様子

Point: Studio CMSとは

Studio CMSは、Studio上で利用できるCMS(Content Management System)機能です。

仕組みや概要については、以下のヘルプ記事をご覧ください。


動的モーダルを追加する

  1. スクリーン右上の[+]ボタン、またはページパネルの[+]ボタンをクリックします。

  2. ページタイプを選択します。

    デフォルトでは、[ページ]・[モーダル]・[リダイレクト]のみが選択肢として表示されているため、「>」をクリックし、動的モーダルを選択します。

  3. 紐付けるCMSモデルを選択し、[作成]ボタンをクリックします。

  4. 空白の動的モーダルページが追加されます。

GIF:動的モーダルを追加する様子。ページパネル上の[+]をクリック、ページタイプの選択、紐付けるCMSモデルの選択、作成ボタンのクリックまでの一連の流れが動画になっている

CMSプロパティを紐付ける

空白のモーダルページに各種ボックス要素を配置してデザインが完了したら、ページ内のボックスにCMSプロパティを紐付けて、コンテンツデータを表示させます。

CMSプロパティの紐付けは、右パネル上の[データ]タブで行います。

詳細は、以下の記事をご覧ください。

スクリーンショット:右パネルのデータタブ上のプロパティとスクリーン上のボックス要素を紐付ける様子。コネクタで繋がっている。


動的モーダルをデザインする

他のページタイプと同様に、外観やレイアウト、レスポンシブ設定などのデザインが可能です。

操作方法の詳細は、次のヘルプ記事を参照してください。

発生条件を指定した上で、表示アニメーション(トランジション / Transition)の設定も可能です。

詳しくは、以下の記事をご覧ください。


パスを利用する

[パスを利用]を有効にすると、モーダルを表示した際に、URLにクエリーパラメーターとしてモーダルのパスが追加されます。

特定のモーダル表示状態をURLで共有したい場合などに有効にしてください。設定は、右パネル上のページ設定で行います。

詳しくは、以下の記事をご覧ください。

右パネルのページ設定パネルで、パスを利用が有効になっている様子。

こちらの回答で解決しましたか?