Support

Account

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">&times;</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; ?>