###はじめに
初めてwordpressのテーマを自分で作っています。初歩的なことかも知れませんが自分では解決できないのでどうかお願いします。
知識がまだまだ足りないので分かりやすい解説をお願いします。
発生している問題
こちらのサイトをみて複数のモーダルウィンドウを導入しました。カスタム投稿の一覧で、「見出しをクリックするとモーダルウィンドウが発生する」というものを作ろうとしています。
しかし現段階では、どこの見出しをクリックしても同じ内容(一番上にある見出しの内容)が表示されてしまいます。
見出しと内容を正しく一致させて表示するにはどうしたらいいのでしょうか?
該当のソースコード
php
1<?php 2if ( have_posts() ) : 3 while ( have_posts()) : the_post(); ?> 4 <div class="box"> 5 <p class="photo"><img src="<?php echo wp_get_attachment_image(get_post_meta($post->ID,"iconImage",true),array(280,280)); ?>"></p> 6 <div id="modal-content-01" class="modal-content"> 7 <p><img src="<?php echo wp_get_attachment_image(get_post_meta($post->ID,"iconImage",true),array(280,280)); ?>"> 8 </p> 9 <h3><?php the_field('dantaimei'); ?></h3> 10 <p class="name"><?php the_title(); ?></p> 11 <p><?php the_content(); ?></p> 12 <p><a id="modal-close" class="button-link">✖</a></p> 13 </div> 14 <p><h3 class="modal-syncer button-link" data-target="modal-content-01"><?php the_title(); ?></h3></p> 15 <span class="tape2"></span> 16 </div> 17 <?php 18 endwhile; 19 endif; 20 ?> 21 22 </div> 23 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 24 <?php 25 wp_enqueue_script('events', get_template_directory_uri() . '/js/nijiiro.js'); 26 ?> 27
JavaScript
1 2$(function(){ 3var nowModalSyncer = null ; 4var modalClassSyncer = "modal-syncer" ; 5 6var modals = document.getElementsByClassName( modalClassSyncer ) ; 7 8for(var i=0,l=modals.length; l>i; i++){ 9 modals[i].onclick = function(){ 10 this.blur() ; 11 var target = this.getAttribute( "data-target" ) ; 12 if( typeof( target )=="undefined" || !target || target==null ){ 13 return false ; 14 } 15 16 nowModalSyncer = document.getElementById( target ) ; 17 if( nowModalSyncer == null ){ 18 return false ; 19 } 20 if( $( "#modal-overlay" )[0] ) return false ; 21 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; 22 23 24 $( "body" ).append( '<div id="modal-overlay"></div>' ) ; 25 $( "#modal-overlay" ).fadeIn( "fast" ) ; 26 27 centeringModalSyncer() ; 28 29 $( nowModalSyncer ).fadeIn( "slow" ) ; 30 31 $( "#modal-overlay,#modal-close" ).unbind().click( function() { 32 $( "#" + target + ",#modal-overlay" ).fadeOut( "fast" , function() { 33 $( '#modal-overlay' ).remove() ; 34 35 } ) ; 36 nowModalSyncer = null ; 37 38 } ) ; 39 40 } 41 42} 43 $( window ).resize( centeringModalSyncer ) 44 function centeringModalSyncer() { 45 if( nowModalSyncer == null ) return false ; 46 var w = $( window ).width() ; 47 var h = $( window ).height() ; 48 49// var cw = $( nowModalSyncer ).outerWidth( {margin:true} ) ; 50// var ch = $( nowModalSyncer ).outerHeight( {margin:true} ) ; 51 var cw = $( nowModalSyncer ).outerWidth() ; 52 var ch = $( nowModalSyncer ).outerHeight() ; 53 54 $( nowModalSyncer ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; 55 56 } 57 58} ) ;
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。