如何动态启动每个幻灯片（自定义帖子类型）的Bootstrap模式？

Question

Ok, I have a slider that works perfectly and generates all custom post type images and text. Now I need when I click on the content in a slider for a modal to open up with some of the content from the modal and a description field which I set with Advanced custom Fields. This is the code for the slider component:

  <div id="it-list" class="container section">
     <div class="section-wrapper">
       <h3 class="widget-title"><span>2016 "IT LIST" HONOREES</span></h3>      
       <div class="slide-wrapper">
       <div class="it-list-slide">
       <?php

    wp_reset_postdata();
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
        'post_type' => 'ddg-itlist',
        'numberposts' => -1,
        'orderby' => 'rand',  
    );

    $postslist = get_posts( $args );

    foreach ($postslist as $post) :  setup_postdata($post);
    $featuretitle = get_the_title($post->ID);
    $post_id    = get_the_id();
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );   
    ?>
    <div class="main-slide-div col-sm-4 center">
        <a href="#" class="modal-toggle" data-toggle="modal" data-target="#post<?php echo $post_id; ?>">
            <div class="it-list-profile-image" style="background-image: url('<?php echo $thumb['0']; ?>');"></div>
            <h4 class="it-list-profile-title"><?php echo $featuretitle; ?></h4>
            <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p>
            <img src="<?php the_field('company_logo'); ?>" class="slide-logo">
        </a>
    </div><!-- end of main slide div -->

                           <!-- Modal -->
<div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      <div class="modal-body">
        <div class="it-list-profile">
            <div class="it-list-profile-info">
                <div class="row">
                    <div class="it-list-profile-image modal-profile-img col-xs-4 col-sm-4 col-md-5" style="background-image: url('<?php echo $thumb['0']; ?>');">
                    </div><!-- end of modal-profile-image -->
                    <div class="col-xs-8 col-sm-8 col-md-7">
                        <h1><?php echo $featuretitle; ?></h1>
                        <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p>
                        <img src="<?php the_field('company_logo'); ?>" class="slide-logo">
                        <p class="itlist-profile-jobtitle"><?php the_field('description_quote'); ?></p>
                    </div><!-- end of text and logo -->
                </div><!-- end of row -->
            </div><!-- end of it-list-profile-info -->
            <div class="it-list-description">
                <p><?php the_field('description_paragraph'); ?></p>
            </div><!-- end of it-list-description --> 
        </div><!-- end of it-list profile -->
      </div><!-- end of modal body -->
      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div> -->
    </div><!-- end of modal content -->
  </div><!-- end of modal dialog -->
</div><!-- end of modal -->


    <?php endforeach; ?>
</div><!-- end of it slide -->
</div><!-- end of slide wrapper -->

Any help would be immensely appreciated.

Answer 1

The easiest way I've found to specify a different modal for each post in a loop would be to increment the data-toggle selector and the modal class, to do this you would use the following line just before the loop -

<?php $i = 0;?>

Then within the loop use -

<?php $i++;?>

Then for the data-target selector put something like -

data-target='.modal<?php echo $i;?>'

And the modal class as -

class='modal modal<?php echo $i;?>'

Hope this helps and I've understood your question correctly!