Support

Account

Home Forums Add-ons Repeater Field Bootstrap Modal Pop

Solving

Bootstrap Modal Pop

  • HI, I’ve been going around on this one for a few hours now, getting myself more and more confused by the logic. I’m sure its straight forward but for the life of me I’m hitting a wall.
    The scenario, I’m using wp and bootstrap on an existing theme that I’m altering, what I’m attempting to do is use repeater fields to generate a series of boxes (got that bit covered) and then show the extended copy, also a repeater field within a modal popup.

    To describe in more detail. I have the following fields set up, title(text), development_stage(text), icon(image), box_color(select), main copy (textarea)
    The thought process was to have title and development stage along with icon in box, using the select(box-color) to choose the color of box, then have a link to open the popup that would display all the fields including the main-copy in a modal popup. More specifically, if you hit box 1 it would open the modal with the long copy for that repeater row, box 2 would show the copy from repeater row 2 and so on and so forth.

    Seems simple but as I say it’s pickling my brain.

    The first bit seemed easy and I’ve output my grid of boxes using the following;

    <?php if(get_field('baby_grid')): ?>
    	<ul>
    	<?php while(has_sub_field('baby_grid')): ?>
    		<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">toggle goes here</a>
    		</li>
    	<?php endwhile; ?>
    	</ul>
    
    <?php endif; ?>

    It’s when I try and pass all that to the modal that things are not working. I’m using the following code to pass the info to the modal.

    <!-- Modal -->
    <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">
            <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>

    I’ve got the grid bit to output ok at the moment, I haven’t managed to get the modal to pass the individual items per row. All I seem to be able to do is click on any box and it passes the first entry to the main copy area.

    That’s where I’ve gotten to, any help would be greatly appreciated.

    Thanks,

    John

    • Elliot

    • February 21, 2014 at 10:33 am

    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; ?>
    
  • This is brilliant. Thanks.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.