Bootstrap Modal和AFC Repeater字段 [英] Bootstrap Modal and AFC Repeater field

问题描述

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

I have a client logo area on my website coming from an Advanced Custom Fields repeater, when clicked, I would like a modal window to pop up with the rest of the info I included in the repeater fields.

每个客户都有徽标，标题，案例研究和推荐。我设法将徽标显示在一个漂亮的网格中，但是单击时弹出的模式有些麻烦...

Each client has a logo, title, case study and testimonial. I have managed to get the logos to display in a nice grid, but I'm having some trouble with the modal popping up on click...

这是我的代码：

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

如您所见，循环最初会检查徽标并显示它，但它应该显示模式包含所有字段的单击窗口...单击时似乎什么都没发生-我看不到有什么问题...

As you can see, the loop initially checks for the logo and displays it but it should display a modal window on click containing all of the fields... nothing seems to be happening when I click - I can't see what's wrong...

下面是徽标条是否有帮助：

Here's a picture of the logo strip if it helps:

< img src = https://i.stack.imgur.com/11KVH.png alt =在此处输入图片描述>

推荐答案

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

This is easy enough when I took a look at your code after seeing the live example.

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

#myModal'.$i.' - The variable isn't wrapped in PHP so the count doesn't display.

将其更改（以及模态div））到
< a href =＃myModal<？php echo $ i;？> data-toggle = modal data-target =＃myModal<？php echo $ i;？>>< img src =<？php echo $ logoblock ['sizes'] ['medium'] ;？>< / a>


Change it up (and the modal div accordingly) to <a href="#myModal<?php echo $i;?>" data-toggle="modal" data-target="#myModal<?php echo $i;?>"><img src="<?php echo $logoblock['sizes']['medium']; ?>"></a>

计数标记似乎不正确...请尝试以下操作：

The markup for the counts looks wrong... try this:

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

这篇关于Bootstrap Modal和AFC Repeater字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！