javascript - 使用 onclick 函数加载 Bootstrap Modal

Question

我试图在单击链接时将 ajax 内容动态加载到 Bootstrap 模式中。我可以在没有模式的情况下很好地加载内容，但不确定如何同时触发模式窗口打开。它会干扰 onclick 功能。 Here's the page I'm working on 。目标是单击缩略图并在模式窗口中打开其详细信息。

以下 onclick 函数会触发加载 WordPress 帖子类型的函数:

<?php
    if ( has_post_thumbnail(get_the_ID())) {
        echo '<a href="#" onclick="displayAntiqueDetails('.get_the_ID().');return false;" title="' . esc_attr( get_the_title() ) . '">';
        echo get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('class'=>'img-responsive', 'alt'=>get_the_title()));
        echo '<span class="caption">'.get_post_meta( get_the_ID(), 'antique_item_number', true ). '</span>';
        echo '</a>';
    }
?>

这行JS调用内容:

function displayAntiqueDetails(post_id){
var urlPart = getUrlPart();
jQuery('.antique-details-container').load(urlPart + '/wp-content/themes/moniqueshay/antique-details.php', {antique_post_id: post_id});
}

我的模态如下所示:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="antique-details well">
            <?php
            if($reserved)echo '<div class="marked reserved"></div>';
            if($sold)echo '<div class="marked sold"></div>';
            if($new)echo '<div class="marked new"></div>';
            ?>
            <div class="row">
                <div class="col-md-8 antique-image">
                    <?php
                    if ( has_post_thumbnail($post_id)) {
                        echo get_the_post_thumbnail($post_id, 'full', array('class'=>'img-responsive', 'alt'=>$post_title));
                    }
                    ?>
                </div>
                <div class="col-md-4">
                    <div class="antique-thumbs">
                        <?php
                        global $antique_attachment_id_set;
                        $antique_attachment_id_set = 1;
                        echo do_shortcode($post_content);
                        $antique_attachment_id_set = 0;
                        ?>
                    </div>
                    <div class="details-list">
                        <h3 class="text-red"><?php echo $post_title; ?></h3>
                        <p><span>Length: </span><?php echo esc_html($length); ?></p>
                        <p><span>Depth: </span><?php echo esc_html($depth); ?></p>
                        <p><span>Height: </span><?php echo esc_html($height); ?></p>
                        <p><span>Item #: </span><?php echo esc_html($item_number); ?></p>
                    </div>
                    <a class="btn btn-default" href="<?php echo home_url('contact/?contact-subject=I am inquiring about '.urlencode($post_title).' ('.urlencode($item_number).')'); ?>">Inquiry about this piece <i class="fa fa-share text-red"></i></a>
                    <div class="social-buttons btn btn-default">
                        <!-- social buttons go here -->
                        <?php if( function_exists('ADDTOANY_SHARE_SAVE_KIT') ) { ADDTOANY_SHARE_SAVE_KIT(); } ?> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

使用jQuery.load()的complete参数指定加载后显示模式的回调:

jQuery('.antique-details-container').load( url, {antique_post_id: post_id},
  function(text,status,jqXHR) { $('#myModal').modal().show() }
);

更新

可以打开模态框两次，从而无法关闭它们。这个(未经测试的)替换函数应该可以解决问题:

var displayingPopup = false;
function displayAntiqueDetails(post_id) {
  if ( displayingPopup ) return;
  displayingPopup = true;      
  var urlPart = getUrlPart();
  jQuery('.antique-details-container').load(urlPart + '/wp-content/themes/moniqueshay/antique-details.php', {antique_post_id: post_id},
    function() {
      jQuery('#myModal').modal().show()
        .one('hidden.bs.modal', function() { displayingPopup = false })
    }
  );
}

添加的行 .one('hidden.bs.modal', function(){...}) 重置 bool 值； .one 与 .on 相同，只是一旦事件被触发，处理程序就会被取消注册。