基于HTML和JavaScript的双模态框问题：seeModal无法关闭

问题现状 #

实现两个按钮分别触发对应模态框，但存在异常：

• seeModal 可正常打开，但无法关闭
• hearModal 打开和关闭均正常
  使用环境为Omeka S的HTML块，<dialog>标签因平台HTML净化工具限制无法使用。

已尝试的方案及问题 #

• 使用addEventListener和onclick绑定事件，CodePen提示二者为null
• 尝试<dialog>模态框方案，代码被平台净化工具破坏
• 使用箭头函数实现绑定，按钮无响应
• 复制W3School单模态框代码可正常运行，但扩展多按钮版本时出现功能异常
• AI生成的代码存在变量未定义问题

需求目标 #

实现按钮与模态框的一一对应触发：点击按钮显示对应模态框，点击关闭按钮隐藏模态框；操作需支持重复触发，且易于扩展至更多按钮。

问题原因分析 #

1. 关闭按钮绑定错误：原代码中仅hearModal的关闭按钮设置了id="close"，seeModal的关闭按钮无此ID，导致document.getElementById("close")仅能获取到hearModal的关闭按钮。调用itemModal时，两个模态框的关闭事件均绑定到了同一个按钮上，因此seeModal的关闭按钮无法触发对应事件。
2. 函数参数被覆盖：原itemModal函数内部用var重新声明了与参数同名的变量（modal/open/close），覆盖了传入的参数值，导致事件绑定逻辑存在潜在的作用域混乱。

修复后的完整代码 #

<!-- Trigger/Open The Modal -->
<p><button id="seeBtn" type="button">SEE</button></p>

<p><button id="hearBtn" type="button">HEAR</button></p>
<!-- The Modal -->

<div class="modal modal-content" id="seeModal">
    <span class="close">&times;</span>

    <p>See their profile</p>
    <p>See their profile</p>
    <p>See their profile</p>
    <p>See their profile</p>
</div>
<!-- The Modal -->

<div class="modal modal-content" id="hearModal">
    <span class="close">&times;</span>

    <p>Hear their Stories</p>
    <p>Hear their Stories</p>
    <p>Hear their Stories</p>
    <p>Hear their Stories</p>
</div>

<script>
// 初始化单模态框的通用函数
function initModal(modalId, triggerBtnId) {
    const modal = document.getElementById(modalId);
    const triggerBtn = document.getElementById(triggerBtnId);
    const closeBtn = modal.querySelector('.close');

    // 绑定打开事件
    triggerBtn.addEventListener('click', () => {
        modal.style.display = 'block';
    });

    // 绑定关闭事件
    closeBtn.addEventListener('click', () => {
        modal.style.display = 'none';
    });

    // 可选：点击模态框外部区域关闭
    window.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.style.display = 'none';
        }
    });
}

// 初始化两个模态框，扩展更多模态框只需重复调用此函数
initModal('seeModal', 'seeBtn');
initModal('hearModal', 'hearBtn');
</script>

关键修改说明 #

• 独立绑定关闭按钮：不再全局获取单个关闭按钮，改为从每个模态框内部通过querySelector('.close')获取对应关闭按钮，确保每个模态框的关闭事件绑定到自身按钮上。
• 修复函数作用域问题：移除原函数中覆盖参数的var声明，使用const声明局部变量，避免作用域混乱。
• 提升扩展性：封装的initModal函数仅需传入模态框ID和触发按钮ID，新增模态框时只需添加对应HTML元素并调用一次initModal即可。
• 增强用户体验：新增点击模态框外部关闭的逻辑（可根据需求移除）。

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