open posts in popup window

<?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 btn-deals" data-toggle="modal" data-target="#deals>" data-url="<?php the_permalink(); ?>">
                             Activate Now
                    </button>

                </p>
            </div><!-- End of caption div -->
        </div><!-- End of thumbnail div -->
    </li><!-- End of first coupon -->



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




<!-- Move this code into the footer.php file and place it before the wp_footer() call. -->

<!-- Modal -->
<div class="modal fade" id="deals">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    //this code should probably be moved out of the html and into a external js file

   $('.btn-deals').on('click touchend', function () {
        $.ajax({
            url: $(this).attr("data-url"),
            dataType: "html"
        }).done(function(data){
            /*
                here is where things get tricky, because the ajax request has
                returned the post as html page. This means is has the header,
                nav, post content, and footer. So what you need to do is find
                just the content you want using jQuery.
            */


            //this will turn the html into a jQuery object so you can filter through it.
            var html = $(data);

            /*
                use this to find the title of the page. In your wordpress templates try to 
                give your page titles one class like .page-title.

                <h1 class="page-title other-classes"><?php the_title();?></h1>
            */
            var title = html.find(".page-title").text();

            /*
                use this to find your post's content. Just like with the title
                this should be wrapped in an html element that has a class
                shared accross all templates

                <h1 class="page-title other-classes"><?php the_title();?></h1>
                <div class="post-content other-css-class"><?php the_content();?></div>
            */
            var body = html.find(".post-content").html();

            /*
                now that you have the information you need you can put it into 
                the modal. In this example, I gave the modal an id of deals.

            */
            $("#deals .modal-title").text(title);
            $("#deals .modal-body").html(body);



        })
    })
</script>