是的,这是可能的。我认为您正在使用引导模式。看起来是这样的:Bootstrap Modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
现在你看到它与特殊
ID
和特别
data-target
因此,您必须为每个模式指定特殊的ID和数据目标。
让我们使用特殊模态创建新查询。
<?php
// Custom WP query query
$args_query = array(
\'order\' => \'DESC\',
);
$query = new WP_Query( $args_query );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) :
$query->the_post(); ?>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-<?php echo esc_attr( get_the_ID() ); ?>">
Open "<?php the_title(); ?>" Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal-<?php echo esc_attr( get_the_ID() ); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php the_content(); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<? endwhile; } else {
echo \'No posts found\';
}
wp_reset_postdata();
?>