1つの画面にモーダルウィンドウのリンクを2つ置き、それぞれ違うコンテンツを表示できない

Question

前提

1つの画面にモーダルウィンドウのリンクを2個置き、それぞれコンテンツの異なるものを用意したのですが表示させたいのですがうまくいきません。※環境はWordPress上です

呼び出し元のaタグにdata-target="modal1" data-target="modal2"を設け、
モーダルのコンテンツのほうではdivタグにid="modal1"、id="modal2"のようにし、data-target=modal1が選択されたらコンテンツ id="modal1"を表示、modal2が選択されたらコンテンツ id="modal2"を表示させたいです。

現状では両方とも画面が開いてしまい、どうやって切り分けたらよいのか分からずご教授願います。

jsのほうで　var modal = '#' + $(this).attr('data-target');
でdata-targetの値は取れたのですが、ここからif文をかましてinnerHTMLするのでしょうか？
それだと不便といいますか、初めからphpのほうにコンテンツ内容を表示させておきたいです。

コンテンツの内容は特に難しい処理はなく、テキストと画像を載せるだけのものです。

実現したいこと

それぞれのコンテンツを表示させたい。

該当のソースコード

functions.php

　<div class="bouhan-box">
   　 <p><a data-target="modal1" class="modal-open reset">〇〇１について</a></p>
    　<p><a data-target="modal2" class="modal-open reset">〇〇２について</a></p>
　</div>
<!-- モーダル本体１ -->
<div id="modal1" class="modal-container">
      <div class="modal-body">
      <!-- 閉じるボタン -->
      <div class="modal-close">X</div>
      <!-- モーダル内のコンテンツ -->
      　<div class="modal-content">
           　<p>〇〇１について</p>
           　<img src="<?php echo get_stylesheet_directory_uri() ?>/images/xxx.jpg" alt="〇〇１について">
　　　　　</div>
 　　</div>
 </div>
 <!-- モーダル本体2 -->
 <div id="modal2" class="modal-container">
      <div class="modal-body">
          <!-- 閉じるボタン -->
          <div class="modal-close">X</div>
          <!-- モーダル内のコンテンツ -->
          <div class="modal-content">
     　      <p>〇〇２について</p>
　　　　　<img src="<?php echo get_stylesheet_directory_uri() ?>/images/yyy.jpg" alt="〇〇１について">
 　　      </div>
      </div>
</div>

 $(function () {

            // 変数に要素を入れる
            var open = $('.modal-open'),
                close = $('.modal-close'),
                container = $('.modal-container'),
                scroll_position = 0;
            

            // 開くボタンをクリックしたらモーダルを表示する
            open.on('click', function () {

                // スクロール固定
                scroll_position = $(window).scrollTop();
                container.addClass('active');
                $('body').addClass('fixed').css({ 'top': -scroll_position });

                // data-targetの内容をIDにしてmodalに代入
                var modal = '#' + $(this).attr('data-target');
                
　　　　　// ここでInnerHTML？
　　　　　if(modal == 'modal1'){

               }else if(modal == 'modal2'){
               }

                return false;
            });

            //閉じるボタンをクリックしたらモーダルを閉じる
            close.on('click', function () {
                container.removeClass('active');
                $('body').removeClass('fixed').css({ top: 0 });//背景固定を解除
                $(window).scrollTop(scroll_position);//元の位置までスクロール
                return false;//<a>を無効化
            });

            //モーダルの外側をクリックしたらモーダルを閉じる
            $(document).on('click', function (e) {
                if (!container.hasClass('active')) {
                    return;
                }
                if (!$(e.target).closest('.modal-body').length) {
                    container.removeClass('active');
                    $('body').removeClass('fixed').css({ top: 0 });//背景固定を解除
                    $(window).scrollTop(scroll_position);//元の位置までスクロール
                    return false;//<a>を無効化
                }
            });
        })

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

サンプルコードを書いているうちに自己解決したようですが、

activeクラスの付加/除去で表示/非表示をしているのなら(closeボタンのコード等から推測)、
下記のコードで両方のモーダルにactiveクラスを追加しているために、両方表示されるので、

 container.addClass('active');

これをクリックしたボタンの data-target の id のモーダルのみにactiveクラスを追加するように修正すればいいだけです。

$('#' + $(this).attr('data-target')).addClass('active');

Comments

[tuki43]

ありがとうございます！さっそく試してみますね。

[tuki43]

こちらの方法で実装させていただきました。
他のページでは
container.addClass('active');
を使っていましたので、pathnameでif文かましました。

Answer 2

自己解決できました！Display blockすれば切り替えできるんじゃないかと思って試したら出来ました！

const m1 = document.getElementById("modal1");
const m2 = document.getElementById("modal2");
// data-targetの内容をIDにしてmodalに代入
var modal = '#' + $(this).attr('data-target');
if(modal == '#modal1'){
m2.style.display = "none";
m1.style.display = "block";
}else if(modal == '#modal2'){
m1.style.display = "none";
m2.style.display = "block";
}