多模态框点击X按钮失效问题：寻求非Bootstrap解决方案

问题根源 #

1. 模态框ID重复：Jinja循环里生成的所有模态框都用了固定ID（more-details1/more-details2），ID是DOM唯一标识，重复导致JS只能获取第一个模态框。
2. 关闭按钮事件未绑定：JS里只获取了第一个.close元素，其余关闭按钮没有绑定关闭逻辑。
3. JS逻辑硬编码：手动为每个模态框写判断，无法适配动态生成的内容，且判断条件错误（所有模态框的关闭都只触发第一个关闭按钮的判断）。

修复方案 #

1. 重构HTML结构（生成唯一标识的模态框）

修改Jinja模板，为每个模态框生成唯一ID，同时给触发按钮加data-modal-id属性关联对应模态框，关闭按钮无需单独加ID，通过DOM层级关系找到父模态框即可：

{% for i in range(anime_name|length)%}
<!-- 触发按钮 -->
<div class="anime-holder" data-modal-id="more-details-{{i}}">点击打开模态框{{i}}</div>

<!-- 对应模态框 -->
<div id="more-details-{{i}}" class="modal">
    <div class="more-details-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <p>{{ anime_name[i] }}</p>
        </div>
        <div class="modal-body">
            <p>Some text in the Modal Body</p>
            <p>Some other text...</p>
        </div>
    </div>
</div> 
{% endfor %}

2. 简化JS逻辑（事件委托处理所有交互）

不用硬编码每个模态框，通过事件委托监听全局点击事件，根据点击目标的类型执行对应操作：

document.addEventListener('click', function(event) {
    const target = event.target;

    // 点击触发按钮，打开对应模态框
    if (target.closest('.anime-holder')) {
        const modalId = target.closest('.anime-holder').dataset.modalId;
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.style.display = 'block';
        }
        return;
    }

    // 点击关闭按钮，关闭所在模态框
    if (target.closest('.close')) {
        const modal = target.closest('.modal');
        if (modal) {
            modal.style.display = 'none';
        }
        return;
    }

    // 点击模态框背景（非内容区域），关闭模态框
    if (target.classList.contains('modal')) {
        target.style.display = 'none';
    }
});

3. CSS保持原样式不变

现有CSS无需修改，直接复用即可。

方案优势 #

• 适配动态生成的任意数量模态框，不用为每个模态框写单独逻辑
• 利用DOM层级和data属性关联，避免ID重复问题
• 事件委托性能更优，无需遍历绑定多个事件

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