模态在轮播的div中打开，而不是在整个页面上打开

问题描述

使用Bootstrap我已经设计了一个轮播，并且已经将每个图像与模态集成在一起。 使用Wagtail CMS，我为轮播图片创建了一个循环，并为模式提供了动态ID，以重复使用具有不同内容的相同模式。 当我单击特定图像时，模式会在轮播的div内打开，而不是在整个页面上打开。

我尝试过的方法： 我尝试将模态放在主体顶部，并尝试使用其ID调用模态。 我还尝试将其放置在不同的div位置中-绝对位置和相对位置。 我固定了模态的位置，并提供了有效的z-index。

请您建议如何解决此问题，并在整个页面而不是轮播的div中获得模式开头。

<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
{% for loop_inside in self.news_inside_images.all%}
{% image loop_inside.inside_image max-320x200 as insideimg %}
{% image loop_inside.inside_modal_image max-320x200 as imimg %}
{% if forloop.counter == 1 %}
 <div class="active item">
{% else %}
 <div class="item">
{% endif %}

<div class="col-xs-12 col-sm-6 col-md-3">
<a data-toggle="modal" data-target="#insideModal{{loop_inside.id}}" class="media-left" tabindex="-1">
  <div class="card">
   <img src={{insideimg.url}} alt="News" class="news_carousel_img_width">
    <p class="card_title">{{loop_inside.inside_text }}</p>
  </div></a>
</div>

<div id="insideModal{{loop_inside.id}}" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
     <!-- Modal content-->
     <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">{{ loop_inside.inside_text }}</h4>
        </div>
      <div class="modal-body">
      {{ loop_inside.inside_modal_content | richtext }}</p>
      </div><div class="modal-footer"></div>
    </div>
  </div>
</div>
</div>
{% endfor %}
</div>
<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）