Bootstrap Modal和AFC Repeater字段

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>