Wordpress post in bootstrap modal - wordpress

Question

I am looking at this example : https://wordpress.stackexchange.com/questions/95661/open-wordpress-posts-in-bootstrap-modal
but don't seem to understand the principal of this. I have my posts displaying as a masonry grid on the front page with this loop:
<?php query_posts('posts_per_page=25'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_title(); ?>
<a href="<?php echo the_permalink(); ?>" class="box col<?php echo rand(2,3); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<?php endwhile; endif; ?>
which when clicked is opening the single-content.php:
<?php while (have_posts()) : the_post(); ?>
<article <?php post_class(); ?>>
<?php the_title(); ?>
<?php get_template_part('templates/entry-meta'); ?>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
I have been trying to get the single-content in a bootstrap modal window when a thumbnail of the masonry grid is being clicked. No luck when experimenting with different content on the web, any guidance would be appreciated.
best of wishes
O.
EDIT:
<?php query_posts('posts_per_page=25'); ?> <!-- posts per page -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<span class="new-wrapper">
<span><h1><?php the_title(); ?></h1></span>
<a href="<?php echo the_permalink(); ?>" class="box col<?php echo rand(2,3); ?>"> <!-- randomize .col2 & .col3, creating the grid portfolio -->
<?php
$post_id = get_the_id();
if ( has_post_thumbnail() ) {
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img src="<?php echo $feat_image;?>">
<?php
}
?>
</span>
<?php endwhile; endif; ?>
<div class="modal fade" id="post<?php echo $post_id; ?>" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<!-- Here showing the title of the post -->
<h4 class="modal-title" id="myModalLabel"><?php
the_title();
?></h4>
</div>
<div class="modal-body">
<?php the_content() // the content is adding here ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
Am using your code, but it is only working on the first post and therefor not being dynamic. Clicking on all the other posts doesn't seem to have any effect.

Answer 1

<?php query_posts('posts_per_page=25'); ?>
<?php the_title(); ?>
<?php
$post_id = get_the_id();//make sure this getting the correct post id
//here change the direct thum to custom link like this
if ( has_post_thumbnail())
{
//here we can get the featured image of the post as a link
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); //make sure this will return the correct featured image url
//place the url in our custome html like this:
//in this we change the target as per the post id so each post have its own modal for show the content in the while loop.
?>
<img src="<?php echo $feat_image;?>">
<?php
}
// here the target is set as #post'current post id'
//here we starting the modal part
?>
<!-- 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">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<!-- Here showing the title of the post -->
<h4 class="modal-title" id="myModalLabel"><?php
the_title();
?></h4>
</div>
<div class="modal-body">
<?php the_content() // the content is adding here ?>
</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
?>
Here am trying to load the modal inside the while loop and change the name of the modal and the click trigger related to the post id. Suppose the post id is 1 then the trigger and the modal id is like #post1 and post1. Here avoid the permlink to the detail page. I hope that this will solve problem.

Answer 2

<?php
//Get Post ID
echo $id= get_the_ID(); ?>
link to open model
Read More
Bootsrap model
<div class="modal fade project-model" id="myModal<?php echo $id;?>" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><?php the_title(); ?></h5>
<button type="" class="close project-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php the_content(); ?>
</div>
</div>
</div>
</div>