修复Bootstrap Modal结合Django循环及Model时重复显示值问题

你的问题核心是Modal ID重复导致所有弹窗加载同一内容，只要给每个循环生成的Modal分配唯一ID就能解决。以下是具体实现方案：

核心思路 #

利用Django循环变量的唯一标识（比如订单的pk、order_number），为每个Modal和对应的触发按钮生成专属ID，确保每个弹窗绑定唯一的内容。

代码示例 #

{% for order in orders %}
  <!-- 触发弹窗的按钮 -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#orderModal-{{ order.pk }}">
    查看订单{{ order.pk }}详情
  </button>

  <!-- 对应订单的专属Modal -->
  <div class="modal fade" id="orderModal-{{ order.pk }}" tabindex="-1" aria-labelledby="orderModalLabel-{{ order.pk }}" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="orderModalLabel-{{ order.pk }}">订单{{ order.pk }}详情</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <!-- 显示当前订单的消息 -->
          <p>{{ order.message }}</p>
          <!-- 可添加其他订单字段 -->
          <p>订单编号: {{ order.order_number }}</p>
          <p>下单时间: {{ order.created_at|date:"Y-m-d H:i" }}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
{% endfor %}

关键细节说明 #

• 每个Modal的id和按钮的data-bs-target都拼接了{{ order.pk }}，彻底避免ID冲突。
• 模态框的aria-labelledby属性也对应唯一的标题ID，符合Web无障碍标准。
• 弹窗内容直接使用循环变量order的属性，确保显示当前循环项的专属数据。

如果你的订单没有pk字段，也可以用其他唯一标识（比如order_number）替换，只要保证每个Modal的ID不重复即可。

内容的提问来源于stack exchange，提问作者Mohammed Jaseem Tp