Repeater Fields and Modal Popups

• [email protected]

• October 15, 2017 at 2:18 am

Hi all, I recently read a similar help topic here: https://support.advancedcustomfields.com/forums/topic/bootstrap-modal-pop/ – I kind of understand it but I cant seem to get my head around how it relates to my situation.

I’m building a grid of client logos, using the ACF repeater function. I have the logos displaying correctly, the fields within the repeater are an image and a page link.

When you click on a logo, instead of a page link, I would like it to open up a modal window. Inside this modal window, I would like the logo again, a title and two text areas.

I just cant figure it out!!

Here’s my initial code for pulling through the logo repeater field:

<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') ): ?>
          <li>
          <div class="block-image">
              <div class="logo-image">
                <div class="logo-center">
                  <?php $logoblock = get_sub_field('client_logo'); ?>
                  <a href="<?php the_sub_field('link_to_case_study'); ?>"><img src="<?php echo $logoblock['sizes']['medium']; ?>"></a>
                </div>
              </div>
          </div>
          </li>
          <?php endwhile; ?>
        <?php endif; ?>
      </ul>
      <?php else: ?>
      <?php endif; ?>
      
    </div>
  </div>
</div>

and heres my modal window code:

<div class="modal fade col-md-4" id="myModal" 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('text area 1');?>
        <!-- Testimonial --><?php the_field('text area 2');?>
      </div>

    </div>
  </div>
</div>

If anyone could help me combine the two that would be amazing!! Thanks 🙂