0

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

https://www.sfiltrowani.pl/filter_instructions是有问题的现场。 https://github.com/rscales02/sfiltrowani是完整的代码 git 存储库。

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

示例链接来自 AF 的相同链接

<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 行代码。谢谢和抱歉！

4

2 回答 2

0

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

于 2019-01-16T22:51:55.490 回答
0

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

模态需要一个由 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>
于 2019-01-11T00:13:15.417 回答