WordPress + bootstrap + 模态

Question

我在使用这段代码时遇到了一些问题。基本上，必须在模态中打开 4 个最近的帖子。这一切都发生在一个循环中。它 "works" 但我有 2 个问题：

我需要多次点击音量图标（a标签）才能打开模式
关闭按钮根本不起作用

谢谢！

<?php
    $args = array( 'numberposts' => '4', 'category_name' => 'evidenza' );
    $recent_posts = wp_get_recent_posts( $args );
    $i = 1;
    foreach( $recent_posts as $recent ):            
        $img_src = "http://127.0.0.1/bootstrap/wp-content/uploads/2016/03/".$i.".png";    
?>  
    <div class="col-md-3">
        <center>
            <img class="img-rect" width="160" height="100" alt="" src="<?php echo $img_src; ?>">

            <h3><?php echo $recent["post_title"] ?></h3>

                <br> <!--open the modal -->
                <a aria-controls="collapseExample" aria-expanded="false" href="#modal-news-<?php echo $recent["ID"]; ?>" data-toggle="collapse">
                    <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
                </a>
        </center>
    </div>

    <div id="modal-news-<?php echo $recent["ID"]; ?>" class="modal fade in" aria-hidden="false" role="dialog" tabindex="-1">
        <div class="modal-content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 col-lg-offset-1">
                        <div class="modal-body">
                            <h2><?php echo $recent["post_title"] ?></h2>
                            <hr class="star-primary">
                            <img class="img-responsive img-centered img-modal" alt="Sound engineering" src="<?php echo $img_src; ?>">
                            <div class=" text-left">
                                <p><?php $content = get_post_field('post_content', $recent["ID"]);
                                echo $content; ?></p>
                            </div>
                            <center> <!--close the modal -->
                                <a data-dismiss="modal" href="#>" class="btn btn-success btn-xl ">Close</a>
                            </center>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php 
    $i++;
    endforeach;
    wp_reset_query();
?>

Answer 1

以下可能会解决这两个问题。

你的数据属性有误data-toggle="collapse"这里打开模态应该是data-toggle="modal"

<a aria-controls="collapseExample" aria-expanded="false" href="#modal-news-<?php echo $recent["ID"]; ?>" data-toggle="collapse">
    <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</a>

所以将 data-toggle="collapse" 替换为 data-toggle="modal"，将 href="#modal-news-<?php echo $recent["ID"]; ?>" 替换为 data-target="#modal-news-<?php echo $recent["ID"]; ?>"

所以上面的模态呼叫按钮应该是

<a data-toggle="modal" data-target="#modal-news-<?php echo $recent["ID"]; ?>">
    <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</a>

和模态内部，关闭按钮移除 href="#>"，不需要它来关闭模态

<a data-dismiss="modal" class="btn btn-success btn-xl">

WordPress + bootstrap + 模态

Wordpress + bootstrap + modal

wordpress

modal-dialog

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3