我正在尝试使用 jquery (bpopup) 将自定义帖子类型的帖子加载到弹出窗口中。我正在尝试做的一个例子是http://outpost.la — 只需单击任何图像即可查看弹出窗口。
我认为我最终需要编写一个函数来执行此操作,但我不确定如何执行此操作。到目前为止,我的页面模板中只有两个代码片段——“触发弹出的按钮”和“弹出的元素”。第一个片段正在做我想做的事:将一系列自定义帖子类型标题显示为按钮。但是应该在弹出窗口中显示自定义帖子类型内容的第二个片段显示了所有自定义帖子类型的标题+内容。
带有背景按钮的弹出窗口的屏幕截图:http: //cl.ly/image/1f0G0c2s2J3U
代码:`
<!-- Button that triggers the popup -->
<?php
$args = array(
'post_type' => 'portfolio_project',
'posts_per_page' => -1 );
$loop = new WP_Query( $args );
$i = 0;
echo'<button class="my-button">';
while ( $loop->have_posts() ) : $loop->the_post();
if ($i % 0 == 0 && $i > 0) {
echo '</button>' . "\n" . '<button class="my-button">';
};
?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php
$i++;
endwhile;
echo '</button>';
?>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<?php
// the query
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; ?>
<!-- end of the loop -->
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<!-- end custom post type loop -->
</div>
<!-- END Element to pop up -->
<script>
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('.my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
appendTo: 'body'
, position: ['auto','0']
, positionStyle: 'fixed'
, scrollBar: 'false'
});
});
});
})(jQuery);
</script>
`