Using Javascript for Looped Content

This may help
<?php
$staff = new WP_Query(array(
    'posts_per_page' => -1,
    'post_type' => 'staff_bios',
    'orderby' => 'title',
    'order'   => 'ASC'
));

while($staff->have_posts()){
    $staff->the_post(); ?>

//Below is what should display for each post.

<div class="staff-thumb" onclick="staffDetails(<?php the_ID(); ?>)">
    //Thumbnail details here 
</div>

//Below is the pop up container (hidden until called).

<div id="<?php the_ID()?>" class="popup-wrap">
    <div class="popup-content">
        <span onclick="staffDetailsClose(<?php the_ID(); ?>)" class="close">×</span>
        <h4><?php the_title(); ?></h4>
        //The rest of the bio details
    </div>
</div>
<?php }
?>


//Here is the Javascript (outside the loop, for now).
<script>
    modal="";

    function staffDetails( p_id ) {
        modal = document.getElementById(p_id);
        modal.style.display = "block";
    }

    function staffDetailsClose( p_id ) {
        document.getElementById( p_id ).style.display = "none";
        modal="";

    }

// based on https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close

// When the user clicks anywhere outside of the modal, close it. NOT TESTED
window.onclick = function(event) {
   if(event.target == modal) {
       modal.style.display = "none";
   }
}

</script>
Related Posts:
