Question

我尝试在单击链接时动态地将ajax内容加载到引导模式中。我可以在没有模态的情况下加载内容，但不确定如何同时触发模态窗口打开。它会干扰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(){...})重置布尔值; .one与.on相同，只是一旦触发事件，处理程序就会被注销。

Answer 2

我没有看到任何触发模态显示的内容。

如果您想要一个按钮来触发模态显示：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

或者如果您想使用JavaScript显示它：

$('#myModal').modal('show');

使用onclick函数加载Bootstrap模式

2 个答案: