前提
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のほうにコンテンツ内容を表示させておきたいです。
コンテンツの内容は特に難しい処理はなく、テキストと画像を載せるだけのものです。
実現したいこと
それぞれのコンテンツを表示させたい。
該当のソースコード
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>
jsファイル
$(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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント