メインコンテンツにスキップ
動的モーダル

CMSモデル内アイテムを動的に表示するモーダルウィンドウ

Saika avatar
対応者:Saika
2か月以上前に更新

動的モーダルとは

CMSダッシュボードで管理する画像やテキストなどのCMSデータを動的に表示できるモーダルウィンドウです。

関連記事

スクリーンショット:動的モーダルウィンドウを編集する様子。

CMSアイテムをクリックした際にページへの遷移ではなく、モーダルウィンドウで簡潔に情報を表示させたいシーンなどでご活用いただけます。

例えばポートフォリオ作品や採用ポジションの詳細表示など、データの管理はCMSで行い、CMSリストからモーダルで追加情報を表示したい場合に便利です。

GIF:CMSアイテムをクリックするとモーダルが表示される様子。

動的モーダルの追加

  1. エディタ右上のページ追加ボタンをクリックします。

  2. 「>」をクリックし、動的モーダルを選択します。

  3. 紐付けるCMSモデルを選択します。

    動的モーダル上にテキストや画像ボックスを追加し、CMSプロパティを紐付ける方法を示すスクリーンショット

CMSデータの紐付け

追加した動的モーダル上にテキストや画像ボックスを追加し、CMSプロパティを紐付けます。

紐付け方法について詳しくは、以下の記事をご覧ください。

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

モーダル自体のサイズやスタイル調整は通常のボックスと同様に行えます。加えてTransition(表示アニメーション)が設定できます。詳しくは、以下の記事をご覧ください。

スクリーンショット:モーダルウィンドウのサイズやスタイル調整する様子。

パスを利用する

動的モーダルのページ設定では「パスを利用」が有効にできます。モーダル表示をURLでシェアする場合にご活用いただけます。

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

スクリーンショット:動的モーダルのページ設定で「パスを利用する」オプションを有効にする様子。

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