WordPress + 引导程序 + 模态

Question

我在处理这段代码时遇到了一些问题。基本上，最近的 4 个帖子必须以模态形式打开。这一切都发生在一个循环中。它“有效”，但我有两个问题：

• 我需要多次点击音量图标（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>

在modal里面，关闭按钮去掉href="#>"，不需要它来关闭modal

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