Bootstrap Modal 和 ACF Repeater 字段

Posted 2023-03-25

【中文标题】Bootstrap Modal 和 ACF Repeater 字段

【英文标题】：Bootstrap Modal and AFC Repeater field

【发布时间】：2018-03-27 02:45:07

【问题描述】：

我的网站上有一个来自高级自定义字段转发器的客户端徽标区域，单击时，我希望弹出一个模式窗口，其中包含我包含在转发器字段中的其余信息。

每个客户都有一个徽标、标题、案例研究和推荐信。我已经设法让徽标显示在一个漂亮的网格中，但我在点击时弹出模式时遇到了一些问题......

这是我的代码：

    <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') ):  $i=1; ?>

                  <li>


                    <div class="block-image">
                        <div class="logo-image">
                            <div class="logo-center">
                                <?php $logoblock = get_sub_field('client_logo'); ?>
                                <a href="#myModal<?php echo $i;?>" data-toggle="modal" data-target="#myModal<?php echo $i;?>">
                                  <img src="<?php echo $logoblock['sizes']['medium']; ?>">
                                </a>
                            </div>
                        </div>
                    </div>


                    <div class="modal fade col-md-4" id="myModal<?php echo $i;?>" 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('client_case_study');?>
                                    <!-- Testimonial -->
                                    <?php the_field('client_testimonial');?>
                                </div>
                            </div>
                        </div>
                    </div>


                  </li>

                <?php $i++; endwhile; ?>
                <?php endif; ?>
            </ul>
            <?php else: ?>
            <?php endif; ?>
        </div>

    </div>
</div>

如您所见，循环最初会检查徽标并显示它，但它应该在单击时显示一个包含所有字段的模式窗口...当我单击时似乎没有发生任何事情 - 我看不到是什么错了……

如果有帮助，这里是徽标条的图片：

【问题讨论】：

你能告诉我页面的网址吗

你好 - 我实际上是在本地处理它，但如果它有帮助，我会在这里设置一个隧道：idee.fwd.wf/brand-ignite-test 它在底部的主页上:)

找不到页面。

@BalwantSingh idee.fwd.wf/brand-ignite-test 这应该可以工作 - 我必须在我的本地 MAMP 服务器上保持隧道打开，所以一旦我关闭我的计算机，它就会切断隧道......

@Aibrean idee.fwd.wf/brand-ignite-test 这应该可以工作 - 我必须在我的本地 MAMP 服务器上保持隧道打开，所以一旦我关闭我的电脑，它就会切断隧道..

【参考方案1】：

当我在看到现场示例后查看您的代码时，这很容易。

#myModal'.$i.' - 该变量未包含在 PHP 中，因此不会显示计数。

将它（以及相应的模态 div）更改为 <a href="#myModal<?php echo $i;?>" data-toggle="modal" data-target="#myModal<?php echo $i;?>"><img src="<?php echo $logoblock['sizes']['medium']; ?>"></a>

计数的标记看起来不对...试试这个：

<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') ): $i = 1; ?>
            <?php while( has_sub_field('client_logos') ): $i ++;?>

              <li>


                <div class="block-image">
                    <div class="logo-image">
                        <div class="logo-center">
                            <?php $logoblock = get_sub_field('client_logo'); ?>
                            <a href="#myModal<?php echo $i;?>" data-toggle="modal" data-target="#myModal<?php echo $i;?>">
                              <img src="<?php echo $logoblock['sizes']['medium']; ?>">
                            </a>
                        </div>
                    </div>
                </div>


                <div class="modal fade col-md-4" id="myModal<?php echo $i;?>" 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('client_case_study');?>
                                <!-- Testimonial -->
                                <?php the_field('client_testimonial');?>
                            </div>
                        </div>
                    </div>
                </div>


              </li>

            <?php endwhile; ?>
            <?php endif; ?>
        </ul>
        <?php else: ?>
        <?php endif; ?>
    </div>

</div>

【讨论】：

非常感谢 :) 我已经用您的建议更新了上面的代码，但是每个徽标似乎都打开了相同的 myModal1 - 加上模态是空的...我使用来自的转发器字段高级自定义字段，它们都充满了内容，所以我不确定发生了什么......

抱歉 Aibrean - 我不确定 - 我怎么知道（我想它会起作用？）大声笑 - 网站又来了：idee.fwd.wf/brand-ignite-test

这个数字涨了吗？示例：#myModal1、#myModal2、#myModal3

对不起，我刚刚看到你的评论 - 不，它们似乎都是#myModal1

我最近注意到 ACF 和计数的一个小错误。我将在我的答案中发布我的解决方案。