Home Forums Add-ons Repeater Field Repeater Fields and Modal Popups


Repeater Fields and Modal Popups

  • Hi all, I recently read a similar help topic here: – 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') ): ?>
              <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>
              <?php endwhile; ?>
            <?php endif; ?>
          <?php else: ?>
          <?php endif; ?>

    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 class="modal-body">
            <!-- Case Study --><?php the_field('text area 1');?>
            <!-- Testimonial --><?php the_field('text area 2');?>

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

Viewing 1 post (of 1 total)

The topic ‘Repeater Fields and Modal Popups’ is closed to new replies.