Get Post ID in Jquery for the popup

1 Views

I want to show the post detail on a modalbox using jquery. I have tried the following code.

Display the links for the modalbox

Read More
<?php $args = array( 'post_status' => 'publish', 'post_type' => 'post', 'orderby' => 'post_date' );
query_posts( $args );
if (have_posts()) :
    while (have_posts()) : the_post();
        ?>  
    <p><a class="modalbox" id="postlink"  href="#inline">Open Popup</a></p>
        <?php
    endwhile;
    wp_reset_query();
endif;
?>

Code for displaying the modalbox(its value is display:none in the css, when i click on the link, popup display. 

<div id="inline">
    <h2 id="#heading"></h2>
    <p></p>
    <a href="#">Read More</a>

</div>

Jquery Code 

<script type="text/javascript">
    $(document).ready(function() {
        $(".modalbox").fancybox();
    });
</script>

How can i get the post ID in the jquery so that specific post detail will display on the popup. Let me know please if it is not possible to get the ID and post detail in jquery.

Thanks in advance.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. do you mean something like:

    ...
while (have_posts()) : the_post();
        ?>  
    <p><a class="modalbox" rel="<?php echo $post->ID; ?>" href="#inline">Open Popup</a></p>
....

    Jquery Code

    <script type="text/javascript">
    $(document).ready(function() {
        $(".modalbox").on("click", function() {
           var postId = $(this).prop("rel"); //post id stored in rel attribute
           $(this).fancybox();
           ......
        });
    });
</script>

  2. I have never worked with wordpress, but the documentation said the following:

    if (have_posts()) :
while (have_posts()) : the_post();
?>  
     <p><a class="modalbox" id="<?php the_ID(); ?>"  href="#inline">Open Popup</a></p>
<?php
    endwhile;
    wp_reset_query();
endif;