Django模板中点击按钮/链接时Bootstrap模态框不显示问题

以下是针对你遇到问题的具体排查和修复步骤：

1. 修复模态框重复渲染问题 #

你在{% for object in object_list %}循环内重复引入了模态框模板，这会在页面生成多个id为confirmModal的元素——DOM中id必须唯一，Bootstrap无法识别正确的模态框实例，直接导致弹窗无法触发。

修改方式：将模态框引入代码移到循环外部，确保页面仅存在一个模态框：

{% extends "base.html" %}

{% block content %}
<!-- 只引入一次模态框，放在循环外 -->
{% include "web/product_confirm_delete-dialog.html" %}
<div class="container">
    <div class="row">
        {% for object in object_list %}
        <!-- 移除循环内的模态框引入代码 -->
        <div class="col">
            <!-- 卡片原有内容保持不变 -->
        </div>
        {% endfor %}
    </div>
    <!-- 分页部分 -->
</div>
{% endblock content %}

2. 补充Bootstrap必需的JavaScript文件 #

Bootstrap模态框依赖jQuery和Bootstrap JS才能正常工作，你的base.html仅引入了CSS文件，缺少核心JS依赖。

修改方式：在base.html的</body>标签前添加以下代码（注意顺序：先加载jQuery，再加载Bootstrap JS）：

<!-- 放在base.html的body末尾 -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>

确保你的静态文件目录中存在这两个文件，或替换为对应版本的CDN链接（Bootstrap 4需搭配jQuery 3.0+版本）。

3. 修复删除按钮的href属性 #

当前删除按钮的href="#confirmModal"是无效占位符，需替换为实际的删除视图URL：

<a
    href="{% url 'product_delete' object.id %}"  <!-- 替换为你的删除视图名称 -->
    class="btn btn-primary"
    data-toggle="modal"
    data-target="#confirmModal"
    id="product_{{object.id}}"
>
    删除
</a>

这样点击模态框确认按钮时，才能正确跳转到删除执行逻辑。

4. 修复确认按钮的JS事件错误 #

你使用箭头函数绑定确认按钮点击事件，导致event变量未定义，引发JS报错并阻断逻辑执行，需改为普通函数：

document.getElementById("confirmButtonModal").onclick = function(event) {
    // 获取触发弹窗的按钮ID
    var caller_id = event.target.closest("#confirmModal").getAttribute("caller-id");
    var caller = document.getElementById(caller_id);
    // 跳转到删除URL
    window.location = caller.getAttribute("href");
};

额外排查要点 #

• 打开浏览器开发者工具（F12），查看控制台是否有JS报错（如元素找不到、变量未定义），这是快速定位问题的核心线索。
• 确认Bootstrap CSS与JS版本一致，避免版本不兼容导致功能失效。
• 检查删除按钮的data-toggle="modal"和data-target="#confirmModal"属性是否正确添加。

内容的提问来源于stack exchange，提问作者anon_dcs3spp