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

モーダルの開閉リンクを設定する

作成済みのモーダルページをリンク先に設定する方法と、モーダル上の要素にモーダルを閉じるリンクを設定する方法を説明します。

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

Point: モーダルとは

モーダルは、ページ遷移を発生させずに追加情報を重ねてポップアップウィンドウです。

Studio CMSで作成したコンテンツデータを活用する場合には、動的モーダルを使用します。


モーダルを開くリンクを設定する

モーダルを開くリンクは、ボタンや画像など任意のボックスに設定します。

  1. モーダルへのリンクを設定するボックスを選択します。

  2. 右パネルで[設定]タブを開きます。

    パネルが閉じている場合には、右パネルを開いてください。

  3. [リンク]設定メニューの[+]をクリックします。

  4. リストからリンクさせたいモーダルページを選択します。

  5. 公開済みのサイトを編集している場合には、公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。


モーダルを閉じるリンクを設定する

  1. モーダルを閉じるリンクは、モーダルページ上のボタンなどの要素に設定します。

  2. モーダル上で閉じる動作を割り当てたい要素を選択します。

    右パネルで[設定]タブを開きます。

    パネルが閉じている場合には、右パネルを開いてください。

  3. [リンク]設定メニューの[+]をクリックします。

  4. リストから、[モーダルを閉じる]を選択します。

  5. 公開済みのサイトを編集している場合には、公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。

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