Champ Bootstrap Modal et Répéteur AFC

Question

J'ai une zone de logo client sur mon site Web provenant d'un répéteur Advanced Custom Fields, lorsque je clique dessus, je voudrais qu'une fenêtre modale apparaisse avec le reste de l'information que j'ai inclus dans les champs de répéteurs . Chaque client a un logo, un titre, une étude de cas et un témoignage. J'ai réussi à obtenir les logos à afficher dans une grille agréable, mais je vais avoir des problèmes avec le modal sauter sur un clic ...

Voici mon code:

<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> 

Comme vous pouvez le voir , la boucle vérifie d'abord le logo et l'affiche mais il devrait afficher une fenêtre modale sur clic contenant tous les champs ... rien ne semble se passer quand je clique - je ne vois pas quel est le problème ...

Voici une image de la bande de logo si elle aide:

Answer 1

Cela est assez facile quand j'ai regardé votre code après avoir vu l'exemple en direct.

#myModal'.$i.' - La variable n'est pas encapsulée dans PHP, donc le nombre ne s'affiche pas.

le changer (et la div modale en conséquence) à <a href="#myModal<?php echo $i;?>" data-toggle="modal" data-target="#myModal<?php echo $i;?>"><img src="<?php echo $logoblock['sizes']['medium']; ?>"></a>

Le balisage pour les chefs d'accusation semble erroné ... essayez ceci:

<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>