javascript - 使用 SimpleModal 和 jQuery 的 Ajax WordPress 帖子弹出窗口

Question

我尝试在这里实现此模式http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html但似乎没有任何作用。

这就是我所做的。

1/包含在标题中

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.simplemodal.js"></script>`

这些链接很不错，因为我都检查了它们。

2/在 header 中包含此脚本

<script>
jQuery(document).ready(function() {
    jQuery('a.postpopup').live('click', function(){
        var id = jQuery(this).attr('rel');
        jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('<?php bloginfo('url')?>/ajax/?id='+id).modal({
           opacity:90,
           position: ["0%"],
           overlayClose:true
        });
        return false;
    });
});
</script>

3/使用此代码制作自定义模板

<?php
/*
Template Name: Ajax
*/
?>
<?php
    $post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
    <?php setup_postdata($post); ?>
    <div class="whatever">
        <h2 class="entry-title"><?php the_title() ?></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </div>
<?php endif; ?>

然后创建一个名为 Ajax 的页面并分配模板 Ajax。

4/实现链接

<a href="javascript:;" rel="257" class="postpopup">this link</a>

如果我点击链接，什么也不会发生。 我做错了什么，因为我对此一无所知？ 谢谢。

Answer 1

jQuery .load()是 ajax，因此您需要在回调中执行任何后续操作，如下所示:

var $ajax-div = jQuery('<div id="ajax-popup"></div>').hide().appendTo('body');
var url = '<?php bloginfo('url')?>/ajax/?id=' + id;
$ajax-div.load(url), function() {
    // the callback
    jQuery('#ajax-popup').modal({
        opacity: 90,
        position: ["0%"],
        overlayClose:true
    });
});