Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Ranish Malhan
Ranish Malhan
Courses Plus Student 76 Points

How to use bootstrap modals in wp_query to open post in modal?

How to use bootstrap modals in wp_query to open post in modal? I tried to do that but nothing happen. Please help!

<?php

$args = array(
   'post_type'  => 'offers',
   'meta_query' => array(
      array(
         'key'     => '_wpb_offer_type',
         'value'   => 'Deal',
         'compare' => '='
      )
   ),
);

$query = new WP_Query( $args );

?>

<div class="owl-container">
    <ul id="recent-offers-deals" class="owl-carousel">


        <?php if ( $query->have_posts() ) :  while (  $query->have_posts() ) : $query->the_post(); ?>
            <li class="offers"> 
                <div class="thumbnail">
                   <?php the_post_thumbnail(''); ?>
                   <h3 class="offer-fav pull right"><i class="fa fa-heart"></i></h3>
                   <div class="caption">
                        <h3 class="offer-heading"><?php the_title(''); ?></h3>
                        <p class="offer-details">
                           <?php echo get_post_meta( get_the_ID(), '_wpb_offer_details', true ); ?>
                        </p>
                        <p>
                            <a class="tc" data-toggle="tooltip" data-placement="right" title="<?php echo get_post_meta( get_the_ID(), '_wpb_terms_&_conditions', true ); ?>">tc</a>

                            <button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#memberModal">
                                     Activate Now
                            </button>

                        </p>
                    </div><!-- End of caption div -->
                </div><!-- End of thumbnail div --> 
            </li><!-- End of first coupon -->
            <!-- Modal -->
                <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <h2>hello</h2>
            <p>hi</p>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

        <?php endwhile; else : ?>
            <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
        <?php endif; ?>


    </ul>
</div>