Home › Forums › Add-ons › Repeater Field › Bootstrap Modal Pop › Reply To: Bootstrap Modal Pop
Hi @j_pocapoc
Because there are multiple ‘modals’ on the page, you need each ‘toggle’ to refer to a separate modal.
All you need to do is place the ‘modal’ code within another repeater field loop
Then make sure your id’s match like so:
<?php if(get_field('baby_grid')): $i = 0; ?>
<ul>
<?php while(has_sub_field('baby_grid')): $i++; ?>
<li style="background-color:<?php the_sub_field('box_color'); ?>"class="col-md-4"><?php the_sub_field('development_stage'); ?>, <img src="<?php the_sub_field('icon'); ?>"/><a href="#" data-toggle="modal" data-target="#myModal-<?php echo $i; ?>">toggle goes here</a>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php if(get_field('baby_grid')): $i = 0; ?>
<?php while(has_sub_field('baby_grid')): $i++; ?>
<!-- Modal -->
<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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><?php the_sub_field('development_stage'); ?></h4>
</div>
<div class="modal-body">
<p><?php the_sub_field('main_copy'); ?></p>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div> -->
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.