ACF中继器+模态

时间:2017-10-14 15:35:31

标签: wordpress twitter-bootstrap bootstrap-modal advanced-custom-fields

我最近在这里阅读了类似的帮助主题:https://support.advancedcustomfields.com/forums/topic/bootstrap-modal-pop/ - 我有点理解,但我似乎无法理解它与我的情况有什么关系。

我正在使用ACF转发器功能构建客户端徽标网格。我正确显示徽标,转发器中的字段是图像和页面链接。

当您点击徽标而不是页面链接时,我希望它打开一个模态窗口。在这个模态窗口中,我想再次使用徽标,标题和两个文本区域。

我无法弄明白!!

这是我用于浏览徽标转发器字段的初始代码:

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

这是我的模态窗口代码:

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

我觉得所有答案都存在,但我无法弄清楚如何将它们组合在一起。如果有人能帮我把两者结合起来那就太棒了!!

0 个答案:

没有答案