模式窗口中的WP动态内容不起作用

帮助！我搞砸了，在这件事上有一个脾气暴躁的客户。。。

我在我的WP php模板文件中创建了一个模式窗口，上面写着"当他们点击这个链接获取更多信息时，弹出这个模式窗口，显示一个脚本示例。"

它所在的页面是一个完整的产品列表，因此每个产品都是自己的自定义帖子，其中包含调用所有产品信息的自定义字段，包括需要在模式窗口中显示的文本。

我使用的CSS的工作原理是，当点击链接时，它确实会激活模式窗口，但它只激活第一个产品项，因此，如果客户点击第14个向下的，他们仍然只看到第一个产品项目的内容。

为了使每个模式窗口显示适当的内容，我需要更改什么？我觉得自己像个傻瓜（

这是我拥有的代码，它为这个小片段提供了动力：

<style type="text/css">
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 370px;
height: 420px;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 330px;
height: 380px;
padding: 10px;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<?php query_posts( array(
 'post_type'    =>'product',
 'orderby' => 'title',
   'order' => 'ASC',
  'showposts' => 9999999,
 'tax_query'    => array(
     array(
        'taxonomy'  => 'Group',
        'field'     => 'slug',
        'terms'     => array( 'books','video','audio-book' ),
        'operator'  => 'NOT IN',
    ),
)
) ); ?>
        <?php while ( have_posts() ) : the_post(); ?>
  <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="images/question.png" alt="What is on the recording?" border="0" /></a>
    <div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
    <p><b>This is an excerpt from the script:</b><br /><?php echo get_post_meta( get_the_ID(), 'sample_script', true ); ?></p></div>
    <div id="fade" class="black_overlay"></div>
   <?php endwhile; ?>