JS模态窗口关闭后无法再次打开的技术求助

问题情况 #

点击绑定了onclick="createModalAddPost()"的按钮可打开模态窗口，但首次关闭窗口后再次点击按钮无法打开，必须刷新页面才能重新触发。

错误原因 #

• 关闭按钮的点击逻辑使用this.parentElement.parentElement.remove()，直接将模态框的根容器（.blog）从DOM中彻底删除，第二次调用函数时document.querySelector(".blog")无法找到该元素，无法添加visual类显示模态框。
• 代码中多余的window.parent.location = window.parent.location.href逻辑完全无效（form.append()返回undefined，条件永远不成立），且会导致不必要的页面刷新。
• 每次调用函数都会创建新的关闭按钮，会导致模态框内重复出现多个关闭图标。

修复方案 #

1. 用CSS类控制显示/隐藏：不删除DOM元素，通过添加/移除visual类来控制模态框的显示状态。
2. 修改关闭逻辑：关闭按钮点击时移除visual类，而非删除模态框元素。
3. 避免重复创建关闭按钮：先检查是否已存在关闭按钮，不存在时再创建。
4. 删除无效代码：移除多余的页面刷新逻辑。

修改后的代码 #

JavaScript代码 #

function createModalAddPost() {
    let form = document.querySelector(".admin-add");
    if(!form){
        console.warn("Элемент [.admin-add] не найден");
        return;
    }
    // 检查是否已存在关闭按钮，避免重复创建
    let closeMain = form.querySelector(".fas.fa-times");
    if (!closeMain) {
        closeMain = document.createElement("i");
        closeMain.classList.add("fas", "fa-times");
        closeMain.onclick = function () {
            // 移除visual类隐藏模态框
            let blog = document.querySelector(".blog");
            blog.classList.remove("visual");
        };
        form.append(closeMain);
    }

    let blog = document.querySelector(".blog");
    blog.classList.add("visual");
}

CSS代码（优化后） #

.blog {
    display: none;
    justify-content: center; 
    align-items: center;
}

.blog.visual {
    display: flex;
}

说明 #

• CSS中默认.blog为display: none隐藏状态，添加visual类后切换为display: flex显示模态框，避免了原代码中重复display声明的冲突。
• 关闭按钮仅在首次打开模态框时创建，不会重复添加。
• 模态框元素始终保留在DOM中，每次点击按钮只需切换类即可重新显示。

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