Question

我有一个通过flask / jinja2框架工作循环创建的一系列6个模态，以及作为循环外部示例的1个模态。当查看页面源代码时，所有模态都会正确填充。循环外的示例模态显示没有问题，但是其他6个模态不会触发。

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

这是针对在AWS弹性beantalk上运行的flask应用程序。通过手动定义模态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 %}

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

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

Answer 1

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

该模式需要一个由数据目标引用的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>

Answer 2

我修复了！似乎模式ID对特定格式敏感，而不仅仅是随机字符串。删除“ .jpg”后，先前版本无效的id和data-target的{{1}}和'instrukcja*.jpg' s模态功能完美。

如何修复模态不显示？

2 个答案: