画像クリックするとポップアップ表示（Vanilla JSあり）

<?php
$fields = SCF::get_option_meta('theme-options', 'hoge_voice');
if($fields[0]['hoge_01']||$fields[0]['hoge_02']||$fields[0]['hoge_03']) :
?>
<section class="p-top-voice">
  <div class="p-top-voice__inner l-inner">
    <div class="p-voice-list">
      <?php
      foreach ($fields as $field_name => $fields_value) :
      ?>
        <?php
        $image_url = wp_get_attachment_image_src($fields_value['enquete_sheet'], 'full');
        ?>
        <?php if($field_name == 0) : ?>
        <!-- 画像ポップアップ用html -->
        <div id="js-voice-modal-container" class="p-voice-modal-container">
          <div><img src="" class="js-voice-modal-container-img"></div>
        </div>
        <?php endif; ?>

        <div class="p-voice-list__item">
          <div class="p-voice-list__item-inner">

            <div class="p-voice-list__info">
              <div class="p-voice-list__info-img">
                <?php if ($image_url[0]) : ?>
                <img src="<?php echo $image_url[0]; ?>" alt="" class="js-voice-modal-popup">
                <?php else : ?>
                <img src="<?php echo get_template_directory_uri() ?>/images/noimage/120x120.jpg" alt="noimage" class="js-voice-modal-popup">
                <?php endif; ?>
              </div>
            </div>

          </div>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<?php endif; ?>

  /* 画像ポップアップ（Vanilla JS） */
  (function() {
    const modal = document.getElementById('js-voice-modal-container');
    const modal_img = document.querySelector('.js-voice-modal-container-img');
    const images = document.querySelectorAll('.js-voice-modal-popup');
  
    images.forEach(function(elem, index) {
      elem.addEventListener('click', function() {
        const img_src = elem.getAttribute("src");
        modal_img.setAttribute("src", img_src);
        modal.classList.add('is-show');
      });
    });

    modal.addEventListener('click', function() {
      modal.classList.remove('is-show');
    });

  })();

  /* 画像ポップアップ（jQuery） */
  const modal = $('#js-voice-modal-container');
  const img = modal.find('img');

  $('.p-voice-list__info-img img').each(function(index) {
    $(this).click(function() {
      img.attr('src', $(this).attr('src') );
      modal.addClass('is-show');
    })
  });

  modal.click(function() {
    $(this).removeClass('is-show');
  });

/* 画像ポップアップ（Vanilla JS） */
(function() {
  const modal_img = document.querySelector('.js-voice-modal-container-img');
  const modal = document.getElementById('js-voice-modal-container');
  const images = document.querySelectorAll('.js-voice-modal-popup');
  const md = 768;

  //画像クリックするとポップアップ表示
  function PopUp() {
    images.forEach(function(elem, index) {
      elem.addEventListener('click', function() {
        const img_src = elem.getAttribute("src");
        modal_img.setAttribute("src", img_src);
        modal.classList.add('is-show');
      });
    });
  }
  //画像クリックしてもポップアップさせない
  function PopUpNull() {
    images.forEach(function(elem, index) {
      elem.addEventListener('click', function() {
        modal_img.setAttribute("src", "");
        modal.classList.remove('is-show');
      });
    });
  }
  //ポップアップをクリックしたら非表示にする
  function PopUp_modalClicked() {
    modal.addEventListener('click', function() {
      modal.classList.remove('is-show');
    });
  }
  //ポップアップリセット
  function PopUp_modalReset() {
    modal_img.setAttribute("src", "");
    modal.classList.remove('is-show');
  }

  //load時の挙動
  window.addEventListener('load', () => {
    var window_width = window.innerWidth;
    if(window_width >= md) { //PC
      PopUp();
      PopUp_modalClicked();
    }
  });
  //リサイズ時の挙動
  window.addEventListener('resize', function() {
    var window_width = window.innerWidth;
    if(window_width >= md) { //PC
      PopUp();
      PopUp_modalClicked();
    } else { //SP
      PopUp_modalReset();
      PopUpNull();
    }
  });

  
})();