在Django应用中实现Codepen JS遮罩Modal弹窗功能无法触发求助

DevOps 小满

2026-10-12

问题根因

ID不匹配：触发弹窗的按钮实际ID为openModalBtn，但JS代码中查询的ID是open-modal-button，导致无法获取按钮元素，点击事件绑定完全失效。
重复ID冲突：你在{% for donation in donations %}循环中给所有查看按钮都设置了相同的IDopenModalBtn，HTML规范要求ID全局唯一，重复ID会导致事件只能绑定到第一个按钮，其余按钮点击无响应。
旧版模板渲染问题：最初提交的代码中modal结构和JS引用放在了{% block content %}外部，Django模板继承时只会渲染block内部的内容，外部代码不会输出到页面中，你更新后的代码已经修复了该问题。
样式依赖：你用到的modal-overlay-visible、modal-visible两个控制显隐的类需要对应CSS代码支持，若未引入对应样式，即使事件触发也看不到弹窗效果。

解决方案

替换按钮固定ID为类名，避免循环生成重复ID：

<button class="btn btn-outline-success openModalBtn" href="#">View</button>

重写JS逻辑，给所有弹窗触发按钮批量绑定点击事件：

// 获取所有打开弹窗的按钮
const openModalButtons = document.querySelectorAll(".openModalBtn");
const closeModalButton = document.getElementById("close-modal-button");
const modalOverlay = document.getElementById("modal-overlay");
const modal = document.getElementById("modal");

// 给每个按钮绑定打开事件
openModalButtons.forEach(btn => {
  btn.addEventListener("click", e => {
    e.preventDefault();
    modalOverlay.classList.add("modal-overlay-visible");
    modal.classList.add("modal-visible");
  });
});

// 关闭弹窗逻辑
closeModalButton.addEventListener("click", e => {
  e.preventDefault();
  modalOverlay.classList.remove("modal-overlay-visible");
  modal.classList.remove("modal-visible");
});