スポンサーリンク

【STUDIO】CMSの詳細ページをモーダルで表示したいとき

STUDIO

シングルページタイプのコーポレートサイトをSTUDIOで制作し、簡単なお知らせ(ニュース)を組み込むことになりました。お知らせの詳細ページは簡易的なものにしたかったので、詳細ページを作らず、何の飾りもないモーダルで作ることにしました。

以前では、STUDIOのCMS機能で生成される動的な内容をモーダルで表示できなかったみたいですが、この記事を投稿した今日現在はアップデートされて機能が追加されていました。その方法をメモ。

動的モーダルを作成する方法

前提として、あらかじめCMSのデータが作成されていることを前提としています。ここでは「news」というCMSモデルを作成した例にしています。

ページを追加

「ページ」タブで「+」ボタンを押す

隠れたメニューを表示する

「動的モーダル」を選択する

対象のCMS(データベース)を選択

モーダルページが追加されるので、ランダムなパスを「news」など、わかりやすい階層名に変更します。

テキストを配置

モーダルページにテキストを配置してデータを紐づける

モーダルを開くリンクを設置

「お知らせ」欄のタイトルにモーダルのリンクを設置

完成

これでCMSに投稿した内容がモーダルに表示されます。

タイトルとURLをコピーしました