Question

I am using the WordPress Loop. I then have a modal popup with more information based on the post.

What I’m currently getting is that when you click the “Read More” Button, It just loads in the first item from the loop. I suspect I need to pass through an ID to the modal and maybe another query runs based on the ID of the post, To load in the appropriate information.

Has anyone achieved this?

My code is as follows :

FIRST LOOP

<div class="team">
                    <?php
                    $args = array( 'post_type' => 'team_member' );
                    $loop = new WP_Query( $args );
                    while ( $loop->have_posts() ) : $loop->the_post();
                    ?>
                    <div class="team_member">
                    <?php the_post_thumbnail('team_member'); ?>
                    <?php the_title(); ?>
                    <a data-toggle="modal" href="#myModal">
                        <img src="<?php bloginfo( 'template_url' ); ?>/assets/img/content/team_read_more.png" alt="Read More" style="border:none;">
                    </a>
                    </div>
                    <?php endwhile; ?>                  
                </div>

MODAL LOOP

<div class="modal hide fade" id="myModal">
                <div class="modal-header">
                  <button data-dismiss="modal" class="close">×</button>
                  <h3><?php the_title(); ?></h3>
                </div>
                <div class="modal-body">
                    <p><?php the_post_thumbnail('team_member'); ?></p>
                    <p><?php the_content(); ?></p>
                    <p><a href="mailto:<?php echo get_post_meta($post->ID, 'email_address', true);?>">
                        <img src="<?php bloginfo( 'template_url' ); ?>/assets/img/content/e_mail_link.png" alt="E-Mail Me" style="border:none;">
                       </a>
                    </p>
                </div>
              </div>

Thanks

Answer 1

In your first loop :

<a data-toggle="modal" href="#myModal">

myModal is the reference to the id of the html element of your modal :

 <div class="modal hide fade" id="myModal">

So if you want multiple modals, you may just add the wordpress post ID to each element.

Use :

<a data-toggle="modal" href="#myModal-<? the_ID(); ?>">

and

 <div class="modal hide fade" id="myModal-<? the_ID(); ?>">