在附着的图像中，帖子以滑块样式显示。当我在滑块中单击post时，假设CArd5，则该帖子的详细信息应显示在弹出窗口中，例如：缩略图、摘录等，弹出的html代码已包含在末尾，如“”
Function addcards()
{
$the_query = new WP_Query( array( \'post_type\' => \'cards\', \'post_status\' => \'publish\' ));
?>
<body>
<div id="demo">
<div class="container">
<div class="row">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<?php
while ($the_query->have_posts())
{
$the_query->the_post();
?>
<div class="item orange">
<!-- <a href = "#modal"> -->
<!-- href = "#modal" -->
<form action="" method = "post">
<a href = "#modal" id="<?php echo get_the_title();?>" onClick="reply_click(this.id)"
class="lbp-inline-link-1 cboxElement" style="text-decoration:none">
<!-- <div style="display: none;">
<div id="lbp-inline-href-1" style="padding:10px; background: #fff;">
<p>This content will be in a popup.</p>
</div>
</div> -->
<div class="squarebox">
<div class="innersquare">
<div>
<table>
<tr>
<td align="left"><p><?php echo get_the_author();?></p></td>
<td align="left"><p><?php echo get_the_date();?></p></td>
</tr>
</table>
</div>
<div>
<h3><?php echo get_the_title();?></h3>
</div>
<div>
<img src="<?php echo the_post_thumbnail_url();?>">
</div>
<div>
<p><?php the_excerpt(); ?></p>
</div>
<div class="fb-share-button" data-href="https://www.facebook.com/Techmatters-125167747841183/" data-layout="button" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.facebook.com%2FTechmatters-125167747841183%2F&src=sdkpreparse">Share</a></div>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-url="https://www.facebook.com/Techmatters-125167747841183/"></script>
</div>
</div>
</a>
</form>
<?php $postid = get_the_title(); ?>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function reply_click(clicked_id)
{
var userID = clicked_id;
alert(userID);
}
</script>
<!-- popup html -->
<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<div>
<h2 id="modal1Title" class="results">
</h2>
<p id="modal1Desc">
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin
with declarative state notation and hash tracking.
</p>
</div>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
<?php
}
add_shortcode(\'cards\',\'addcards\');
?>
SO网友:Mr. M
我给你一个想法，你必须使用jQuery弹出窗口，下面的语法将在HTML弹出窗口中为你提供当前的帖子数据。
while ($the_query->have_posts()): $the_query->the_post();
echo \'<div class="non-popup">\';
echo \'<div class="card-title" id="card-\'.get_the_title.\'">\'.get_the_title().\'</div>\';
write you front end code + html (http://screenshotlink.ru/eff3d7431f4fbcd6a03ca5fcbbc41cdd.png)
echo \'</div>\';
echo \'<div class="popup" style="display:none;">\';
echo \'<div class="popup-title">\'.get_the_title().\'</div>\';
write your popup html + code
echo \'</div>\';
endwhile;
以下是jQuery：
$(document).ready(function(){
$(".card-title").on(\'click\',function(){
$(this).siblings().css(\'display\',\'block\');
});
});
