动态Flask站点中Bootstrap模态框仅首个生效全浏览器均可复现

DevOps 小满

2026-10-6

问题核心原因

动态渲染的模态框aria-labelledby属性配置错误，所有循环生成的模态框都指向了同一个不存在的公共IDenrollLabel，导致Bootstrap模态框实例初始化异常，仅第一个可正常触发。

解决方案

1. 修正模态框属性配置

将模板中循环生成模态框的代码里的aria-labelledby属性值，替换为对应模态框的标题ID，修改后代码如下：

{% for item in result %}
        <div class="modal fade" id="modal-{{item.id}}" tabindex="-1" aria-labelledby="modal-{{item.id}}-title" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="modal-{{item.id}}-title">{{item.property}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <!-- 原有内容 -->
              </div>
            </div>
          </div>
        </div>
  {% endfor %}

2. 手动初始化模态框（可选，修正属性后仍异常时使用）

如果修改属性后问题仍存在，在Bootstrap JS引入后添加以下代码手动初始化所有模态框实例：

document.addEventListener('DOMContentLoaded', function () {
  const modalList = document.querySelectorAll('.modal');
  modalList.forEach(modalEl => new bootstrap.Modal(modalEl));
});