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

モーダル内でスクロールを設定する

モーダル内にスクロールを設定すると、サイト閲覧者がページを移動せずに必要な情報を効率的に閲覧できるようになります。設定方法を解説します。

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

Point: モーダルとは

モーダルは、ページ遷移を発生させずに追加情報を重ねて表示するポップアップウィンドウです。Studio CMSで作成したコンテンツデータを活用する場合には、動的モーダルを使用します。

モーダル内でスクロールを有効にすることで、多くの情報を1つのモーダルにまとめて表示できます。サイト閲覧者にとって、ページを移動することなく情報を閲覧できるメリットがあります。

設定手順

1. モーダルの設定

  1. ページパネルから、作成済みのモーダルページを開きます。

  2. コンテンツが内包されるボックスを選択します。

  3. 内容ボックスが並ぶ方向を[下向き↓]、整列を[中央揃え・上寄せ]にします。

  4. コンテンツが内包されるボックスを選択したまま右パネルを開き、[ボックス]タブを開きます。右パネルが閉じている場合は開いてください。

  5. はみ出し設定を[垂直スクロール]にします。

    ※このとき表示されるスクロールバーは、編集時の確認用としてエディタでのみ表示されます。

2. リンクの設定

モーダルを開くリンクと、モーダルを閉じるボタンの設定を行います。
詳しい手順は、モーダルへのリンク設定方法をご覧ください。

3. 動作確認

  1. ライブプレビューで、スクロールの動作を確認します。

  2. 公開済みのサイトを編集していた場合は、公開パネルでサイトを更新します。公開パネルでサイトを更新するまで、公開サイトには変更内容が反映されません。


スクロールが上手くいかない場合

モーダルの縦幅が[auto]や[flex]になっていると、スクロールが動作しません。モーダルページ最上位のボックス(Backdrop)の縦幅100%の要素を超えない範囲で、[%]値または[px]値に変更してください。

注意:[px]指定の場合、縦幅が短くなる環境(縦幅が狭い端末や検証ツール起動時など)ではスクロールが機能しない場合があります。

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