我有一个WordPress页面，有一个网格可以拉帖子。每个帖子都在一个显示标题+缩略图的框中，点击后，帖子的内容也应显示在模式中（即，从点击的帖子中提取数据）。
我一直在看这个例子：Open WordPress Posts in Bootstrap Modal 并且可以通过数据属性使其工作，即：
<ul class="thumbnails-x">
<?php
$labels = new WP_Query(array(
\'post_type\' => \'x\',
\'posts_per_page\' => 1000
));
while ( $labels->have_posts() ) :
$labels->the_post();
?>
<li class="yy">
<?php echo \'<div class="thumbnail">\';?>
<a href="<?php echo get_permalink(); ?>">
<?php the_post_thumbnail(\'\');?></a>
**<button type="button" data-toggle="modal"
data-target="#myModal-<? the_ID(); ?>"><?php the_title();?></button>**
</li>
<div id="myModal-<? the_ID(); ?>" class="modal hide fade"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<h3 id="myModalLabel">
<?php the_title();?>
</h3>
<p>
<?php the_content();?>
</p>
</div>
<div class="modal-body">
<?php the_post_thumbnail(); ?>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
但不幸的是，我无法通过Javascript让它工作。如果有人能帮助我编写代码，以及我如何在其中实现动态特性，那就太好了？如果我没有按下按钮，那么下面的操作就行不通了：
<a href="#myModal-<? the_ID(); ?>" data-toggle="modal" id="clickme">
<?php the_title();?>
</a>
然后在js文件中显示以下内容：
**$(document).ready(function(){
$("#clickme").on
("click", function(){ $("myModal-<?the_ID();>").modal();});
});**
非常感谢你！
最合适的回答,由SO网友:murdaugh 整理而成
由于我猜您没有使用PHP呈现Javascript文件，因此需要使用PHP以外的其他工具将帖子的ID发送到匿名函数。您可以在#clickme中使用数据属性<a> 喜欢data-id="<?php the_ID(); ?>" 然后将单击更改为：
$(document).ready(function(){
$("#clickme").on
("click", function(){ $("#myModal-" + $(this).attr(\'data-id\')).modal();});
});
或者类似的东西。
SO网友:Allure Web Solutions
有两种可能的方法可以实现你的目标，这两种方法在我的博客文章中都有详细描述：https://allurewebsolutions.com/open-wordpress-post-modal-without-plugin
第一种方法
第一种方法需要修改模板，该模板为要显示在模式中的内容提供服务。例如，您有一个名为
modal-content-template.php.
在该模板中，我们将要加载到模式中的内容包装为：
<?php if (!$_GET) { ?>
// content that gets loaded on mobile
<?php } ?>
我们排除WordPress页眉和页脚的模板的完整示例：
<?php if (!$_GET) { get_header(); } ?>
<article>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1 class="page-title"></h1>
<section class="entry-content cf">
<?php the_content(); ?>
</section>
</article>
<?php if (!$_GET) { get_footer(); } ?>
CodePen example 对于完成此工作所需的JS
第二种方法第二种方法更优雅一些。我们使用modalContent.load(post_link + \' #modal-ready\'); 方法加载模态内容。
模态联系人包装在ID为的包装容器中#modal-ready. 这可以在不接触页面模板的情况下使用一个与内容挂钩的函数来完成。
add_action(\'the_content\', \'wrap_content\');
function wrap_content($content)
{
return \'<div id="modal-ready">\' . $content . \'</div>\';
}
