如何修复模态不显示？答案

【问题标题】：How to fix modals not showing?如何修复模态不显示？
【发布时间】：2019-01-17 06:51:55
【问题描述】：

我有一系列 6 个模态，它们是通过烧瓶/jinja2 框架工作循环创建的，还有 1 个模态是循环外的示例。查看页面源时，所有模式都会正确填充和填充。循环外的示例模态显示没有问题，但是其他 6 个模态不会触发。

https://www.sfiltrowani.pl/filter_instructions 是存在问题的实时站点。 https://github.com/rscales02/sfiltrowani 是完整的代码 git 存储库。

这是针对在 AWS elastic beanstalk 上运行的烧瓶应用程序。我能够通过手动定义模态 ID 和数据目标来显示示例模态，这是我从原始模态代码的复制/粘贴和到模态的原始链接所做的唯一更改。

示例链接来自 A-F 的相同链接

<a href="#" data-toggle="modal" data-target="#instrukcjaF.jpg   ">{{ _('(instrukcja photo F)') }}</a>

模态循环为指令创建图像模态

{% for image in images %}

<!-- Modal -->

<div class="modal fade" id="{{ image }}" role="dialog">

<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
        <img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>

  </div>
 </div>
 {% endfor %}

预期结果会在我的说明中为每张照片触发一个模态。当前结果仅会显示示例模式。

[编辑] 我是堆栈的新手，经过编辑以显示由于缺少缩进而隐藏的 3 行代码。谢谢和抱歉！

【问题讨论】：

标签： python flask flask-bootstrap

【解决方案1】：

您的链接未指向要显示的模式。

模态框需要一个被 data-target 引用的 ID

<a href="#" data-toggle="modal" data-target="#this-modal-id">{{ _('(instrukcja photo F)') }}</a>

<div class="modal-dialog"  id="this-modal-id">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>

【讨论】：

我编辑了我的评论，因为这是我的第一个评论，编辑把我扔了，一些代码的格式不正确。我认为编辑后的评论反映了您的更改，并且模态仍然无法正常运行。谢谢。
对不起，我在引用您尝试将 id 移到那里时错过了顶级 div。这个链接可能有更多有用的信息w3schools.com/howto/howto_css_modals.asp
顶级 div 是 id 所在的位置。如果没有适当的缩进，您不会错过 '
' 的消失。

【解决方案2】：

我修好了！模态ID似乎对特定格式敏感，而不仅仅是随机字符串。以前不起作用的版本有'instrukcja*.jpg' 的data-targets 和data-targets，当'.jpg' 被删除时，模态功能完美。

【讨论】：