模态窗口中的WP动态内容不能正常工作

帮助！我搞砸了，并在这一个有一个非常胡思乱想的客户端...模态窗口中的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; ?>

来源

2014-08-28 user3164127

我最近有一个类似的问题，什么是实际发生的情况是，所有的职位的onclick弹出，因为他们是绝对它们在彼此的顶部堆叠，并创造出每次只出现第一个窗口的幻觉。可能值得检查一下。

来源

2014-08-29 07:28:34 Kidcompassion

模态窗口中的WP动态内容不能正常工作

回答

相关问题