Question

帮助！我搞砸了，在这个上面有一个非常胡思乱想的客户......

我在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; ?>

Answer 1

我最近遇到了类似的问题，实际发生的事情是所有的帖子都弹出来了，因为它们绝对定位，它们堆叠在一起，创造了只有第一个窗口弹出的错觉每次。也值得为你检查一下。

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

1 个答案: