javascript - Bootstrap 模态内容未在 Firefox 或 Safari 以及手机中显示

Question

我正在使用以下代码在 Wordpress 中创建一个 boostrap 模态:

        <!-- slider -->
        <a id="osta" class="anchor"></a>
        <div id="slider-section" class="slider-section baas-slider">
        <div class="wide-grid gray-back">
            <div class="inner-grid">
            <div class="sliders">
            <?php if( have_rows('b-slider') ):
                    $counter2 = 1;
                    while ( have_rows('b-slider') ) : the_row(); ?>
                    <div class="b-slide">
                        <div class="button-baas">
                            <button data-toggle="modal" data-target="#serviceModal<?php echo $counter2; ?>"><?php the_sub_field('b-price'); ?></button>
                        </div>
                    </div>
            <?php endwhile; $counter2++; endif; ?>
            </div>
            </div><!-- wide-back -->
        </div><!-- slider section -->   

<!-- modal -->
<?php if( have_rows('modal') ):
    $counter3 = 1;
    while ( have_rows('modal') ) : the_row(); ?>
<div class="modal" id="serviceModal<?php echo $counter3; ?>" tabindex="-1" role="dialog" aria-labelledby="serviceModal<?php echo $counter3; ?>Label" aria-hidden="true">
    <div class="helper">
    <div class="modal-dialog wide-grid">
        <div class="modal-controls">
            <div class="btn-next">
                <span class="ion-chevron-right"></span>
            </div>
            <div class="btn-prev">
                <span class="ion-chevron-left"></span>
            </div>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ion-close"></span></button>
      <div class="modal-content">
        <div class="modal-body content-inner">
         <div class="flexing">
            <div  class="flex">
                <?php the_sub_field('modal-1'); ?>
            </div>
         </div>
        </div>
      </div>
    </div>
    </div>
  </div>
<?php endwhile; $counter3++; endif; ?>
<!-- modal -->

出于某种原因，当我在 Firefox、Safari、android 或 iOS 中打开它时，我只能看到模态的背景。 Chrome 工作正常。可能是什么原因造成的？

在此处查看站点:http://no11.ee/klienditugi/kliendibaas/#osta (点击价格按钮)

Answer 1

通过将模式移动到 </body> 之前的 footer.php 来修复标签。现在使用 ACF 在“选项”页面下编辑页面。