avero-team-block.php

<?php
  $teamTitleRow = get_field('team_title_row');
  $teamSectionBg = get_field('team_section_background_image');
?>

<div class="avero-team-block-wrap" style="background-image:url(<?php echo $teamSectionBg; ?>)">
  <div class="content-wrap">

    <div class="title-row">
      <span class="tiny-head"><?php echo $teamTitleRow['subtitle']; ?></span>
      <h2 class="title"><?php echo $teamTitleRow['title']; ?></h2>
      <div class="copy">
        <?php echo $teamTitleRow['content']; ?>
      </div>
    </div>

    <div class="team-grid-row facet-template">

      <?php 
      // Used to trigger JS
      // Hidden by CSS
      echo do_shortcode('[facetwp facet="hidden_search_facet"]');

      $args = array(  
        'post_type' => 'team',
        'post_status' => 'publish',
        'posts_per_page' => 3, 
        'orderby' => 'menu_order', 
        'order' => 'ASC',
        'facetwp' => true,
        'tax_query' => array(
          array(
            'taxonomy' => 'categories',
            'field' => 'slug',
            'terms' => 'executives',
          ),
        ),
      );

      $loop = new WP_Query( $args ); 
      $i = 0;
      $z = 0;
          
      while ( $loop->have_posts() ) : $loop->the_post(); 
        $jobTitle = get_field('job_title');
        $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
        $additionalFields = get_field('additional_fields');
      ?>  

        <!-- <div class="grid-item" style="background-image:url(<?php // echo $backgroundImg[0] ?>)"> -->
        <div class="grid-item" data-modal="modal<?php echo $i++; ?>">
          <img src="<?php echo $backgroundImg[0] ?>" alt="">
          <div class="gradient layer"></div>
          <div class="overlay">
            <div class="filter layer"></div>
            <i class="fa fa-plus"></i>
          </div>
          <div class="meta">
            <h5 class="title"><?php the_title(); ?></h5>
            <span class="tiny-head"><?php echo $jobTitle; ?></span>
          </div>
        </div>  

        <!-- The Modal -->
        <div id="modal<?php echo $z++; ?>" class="modal-window modal">

          <!-- Modal content -->
          <div class="modal-content">
            <span class="close">&times;</span>
            
            <div class="img-col">
              <img src="<?php echo $backgroundImg[0] ?>" alt="">
            </div>

            <div class="content-col">
              <h2 class="title"><?php the_title(); ?></h2>
              <span class="tiny-head job-title"><?php echo $jobTitle; ?></span>
              <?php the_content(); ?>
              <div class="custom-fields">

                <?php if( have_rows('additional_fields') ): ?>
                  <ul class="list">
                  <?php while( have_rows('additional_fields') ): the_row(); 
                    // vars
                    $prompt = get_sub_field('prompt');
                    $answer = get_sub_field('answer');
                    ?>
                    <li class="item">
                      <span class="prompt tiny-head"><?php echo $prompt; ?></span>: <span class="answer"><?php echo $answer; ?></span>
                    </li>
                  <?php endwhile; ?>
                  </ul>
                <?php endif; ?>

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

        </div>

      <?php endwhile; ?>
      
      <button class="fwp-load-more"><span class="tiny-head">See More</span> <i class="fa fa-plus tiny-head"></i></button>

      <?php wp_reset_postdata(); ?>

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

custom.js

jQuery(function ($) {

  /**
   * Modal Functionality for Team Bios
   */
  var modal = document.getElementsByClassName('modal');

  var btn = document.getElementsByClassName("grid-item");

  var span = document.getElementsByClassName("close");

  // Open modal corresponding to button
  for (var y = 0; y < btn.length; y++) {
    var thisBtn = btn[y];
    thisBtn.addEventListener("click", function () {
      var modal = document.getElementById(this.dataset.modal);
      modal.style.display = "block";
    }, false);
  }

  // When the user clicks on <span> (x), close the modal
  for (var w = 0; w < span.length; w++) {
    var closeBtn = span[w];
    closeBtn.addEventListener("click", function() {
      var modalWindow = this.parentElement.parentNode;
      modalWindow.style.display  = "none";
      // alert(modalWindow.getAttribute("id") );
    }, false);
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function (event) {
    for (var l = 0; l < modal.length; l++) {
      var currentModal = modal[l];
      var modalContent = currentModal.firstElementChild;
      // alert(modalContent);
      // modalContent.addEventListener("click", function() {
      //   return;
      // })
      // currentModal.addEventListener("click", function() {
      //   var modalBox = this;
      //   modalBox.style.display = "none";
      // })
    }
  }
  
});