ブートストラップモーダルとAFCリピータフィールド

Question

高度なカスタムフィールドリピータから来る私のウェブサイトにクライアントロゴ領域があります。クリックするとモーダルウィンドウがリピータフィールドに含まれている残りの情報をポップアップ表示します。

各クライアントには、ロゴ、タイトル、ケーススタディ、およびお客様の声があります。あなたが見ることができるように

<div style="background-color:#ffffff;width:100%;"> 
    <div class="container margin-top-20" > 

     <div class="row"> 
      <?php if(get_field('client_logos')): ?> 
      <div style="clear:both;margin-top:20px;"> 
      </div> 
      <h3 class="brand-white" > 
       Our Clients 
      </h3> 
      <ul class="blocks blog-block logo-block"> 
       <?php if(get_field('client_logos')): ?> 
       <?php while(has_sub_field('client_logos')): $i=1; ?> 

        <li> 


        <div class="block-image"> 
         <div class="logo-image"> 
          <div class="logo-center"> 
           <?php $logoblock = get_sub_field('client_logo'); ?> 
           <a href="#myModal<?php echo $i;?>" data-toggle="modal" data-target="#myModal<?php echo $i;?>"> 
            <img src="<?php echo $logoblock['sizes']['medium']; ?>"> 
           </a> 
          </div> 
         </div> 
        </div> 


        <div class="modal fade col-md-4" id="myModal<?php echo $i;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
         <div class="modal-dialog" > 
          <div class="modal-content" style="background-color: 
           <?php the_sub_field('box_color'); ?>"> 
           <div class="modal-header"> 
            <!-- Close x --> 
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
            <!-- Logo --> 
            <?php the_field('client_logo');?> 
            <!-- Title --> 
            <?php the_field('client_title');?> 
           </div> 
           <div class="modal-body"> 
            <!-- Case Study --> 
            <?php the_field('client_case_study');?> 
            <!-- Testimonial --> 
            <?php the_field('client_testimonial');?> 
           </div> 
          </div> 
         </div> 
        </div> 


        </li> 

       <?php $i++; endwhile; ?> 
       <?php endif; ?> 
      </ul> 
      <?php else: ?> 
      <?php endif; ?> 
     </div> 

    </div> 
</div> 

：ここ

は私のコードです...私は素敵なグリッドに表示するロゴを取得するために管理しているが、私はクリックでポップアップモーダルでいくつかの問題を抱えていますループは最初ロゴを確認して表示しますが、すべてのフィールドを含むクリックでモーダルウィンドウが表示されるはずです...クリックしたときに何も起きていないようです - 何が間違っているかわかりません...

ロゴストリップの写真があります。

Answer 1

これは、実際のサンプルを見た後でコードを見たときには簡単です。

#myModal'.$i.' - 変数はPHPでラップされていないので、カウントは表示されません。

変更それを（それに応じてモーダルDIV） <a href="#myModal<?php echo $i;?>" data-toggle="modal" data-target="#myModal<?php echo $i;?>"><img src="<?php echo $logoblock['sizes']['medium']; ?>"></a>

カウントのためのマークアップが間違って見える

に...これを試してみてください。

<div style="background-color:#ffffff;width:100%;"> 
<div class="container margin-top-20" > 

    <div class="row"> 
     <?php if(get_field('client_logos')): ?> 
     <div style="clear:both;margin-top:20px;"> 
     </div> 
     <h3 class="brand-white" > 
      Our Clients 
     </h3> 
     <ul class="blocks blog-block logo-block"> 
      <?php if(get_field('client_logos')): $i = 1; ?> 
      <?php while(has_sub_field('client_logos')): $i ++;?> 

       <li> 


       <div class="block-image"> 
        <div class="logo-image"> 
         <div class="logo-center"> 
          <?php $logoblock = get_sub_field('client_logo'); ?> 
          <a href="#myModal<?php echo $i;?>" data-toggle="modal" data-target="#myModal<?php echo $i;?>"> 
           <img src="<?php echo $logoblock['sizes']['medium']; ?>"> 
          </a> 
         </div> 
        </div> 
       </div> 


       <div class="modal fade col-md-4" id="myModal<?php echo $i;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
        <div class="modal-dialog" > 
         <div class="modal-content" style="background-color: 
          <?php the_sub_field('box_color'); ?>"> 
          <div class="modal-header"> 
           <!-- Close x --> 
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
           <!-- Logo --> 
           <?php the_field('client_logo');?> 
           <!-- Title --> 
           <?php the_field('client_title');?> 
          </div> 
          <div class="modal-body"> 
           <!-- Case Study --> 
           <?php the_field('client_case_study');?> 
           <!-- Testimonial --> 
           <?php the_field('client_testimonial');?> 
          </div> 
         </div> 
        </div> 
       </div> 


       </li> 

      <?php endwhile; ?> 
      <?php endif; ?> 
     </ul> 
     <?php else: ?> 
     <?php endif; ?> 
    </div> 

</div>