Question

我已经搜索了这个答案，我做了很多尝试，但是仍然无法正常工作... 在下面，我将为您提供代码。拜托，我将非常感谢能帮助我的人。谢谢。

我将尝试向您解释我做了什么。基本上，我将帖子ID链接到模式窗口，以在特定模式窗口上显示特定帖子内容。似乎可能可行，但不行。我意识到模式ID链接在链接更改时不会更改...我不知道该怎么做... 在下面，我将给您截图。抱歉，如果我在解释所有这些内容时出错了..：）

PHP代码：

    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 align-self-start">
                            <div class="client-opinion-box text-center">
                                <p class="client-opinion-box-txt text-center"><?php the_excerpt(); ?></p>
                            *** <a class="btn btn-primary" id="clickme" data-toggle="modal" data-id="<?php the_ID(); ?>" href="#myModal-<?php the_ID(); ?>">читать полностью&gt;&gt;
                                </a> ***
                                <h4 class="client-opinion-box-sub_header"><?php the_title(); ?></h4>
                            </div>
                        </div>

                        <?php
                    }

                    wp_reset_postdata(); // сброс

                 ?>

            </div>
            <div class="row justify-content-center">
                <button id="opinion-btn" class="main-button opinion-btn btn btn-primary" type="button" data-toggle="collapse" data-target="#collapsed-opinion-leave" aria-expanded="false" aria-controls="collapsed-opinion-leave">Добавить отзыв</button>
            </div>
            <div class="row opinion-leave-box collapse" id="collapsed-opinion-leave">
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">


                    <h3 class="opinion-leave-box-header">Оставьте свой отзыв</h3>
                    <?php 

                        echo do_shortcode('[contact-form-7 id="144" title="Контактная форма (ОТЗЫВЫ)"]');

                     ?>                 

                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 opinion-alignment">
                    <img src="/wp-content/themes/Rodoslov-theme/assets/img/Opinions/family-tree-opinion.png" class="img-responsive opinion-leave-img" alt="Family Tree">
                </div>
            </div>
        </div>
    </section>

    <!-- Modal Bootstrap -->
        <!-- Modal -->
        *** <div class="modal fade" id="myModal-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> ***
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle"><?php the_title(); ?></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <?php the_content(); ?>
              </div>
            </div>
          </div>
        </div>

JS代码：

    $(document).ready(function(){  
        $("#clickme").on
          ("click", function(){
            $("#myModal-" + $(this).attr('data-id')).modal();

          });
      });

图片：

enter image description here

如何在Bootstrap 4 Modal，Wordpress中显示帖子中的特定内容

0 个答案: