如何实现点击X图标或外部区域关闭URL唤起的Vanilla JS模态框？

要解决这个问题，你需要给关闭按钮和模态框外部区域添加点击事件监听，同时同步更新URL哈希优化体验。以下是修改后的完整代码：

<section id="faqs">
    <div class="section-content">
        <div class="container">
            <div class="modal" id="modal-faqs">
                <div class="modal-content" id="modal-faqs-content"> <!-- 修复原代码重复ID问题，避免DOM选择异常 -->
                    <span class="modal-close">&times;</span>
                    <div class="container">
                        <div id="centered-txt">
                            <h1>Title</h1>
                        </div>
                        <div class="so-accordion-wrapper">
                          Content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // 获取核心DOM元素
    const modal = document.getElementById('modal-faqs');
    const closeBtn = document.querySelector('.modal-close');
    const modalContent = document.getElementById('modal-faqs-content');

    // 封装打开模态框逻辑
    function openModal() {
        modal.style.display = 'block';
        // 可选：打开时禁止页面滚动
        document.body.style.overflow = 'hidden';
    }

    // 封装关闭模态框逻辑
    function closeModal() {
        modal.style.display = 'none';
        // 移除URL哈希，避免刷新页面再次打开模态框
        window.history.replaceState(null, null, ' ');
        // 恢复页面滚动
        document.body.style.overflow = 'auto';
    }

    // 页面加载时检测哈希，自动打开模态框
    if (window.location.hash === '#modal-faqs') {
        openModal();
    }

    // 绑定关闭按钮点击事件
    closeBtn.addEventListener('click', closeModal);

    // 绑定模态框外部区域点击事件：仅点击模态框容器（非内部内容）时关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });

    // 监听URL哈希变化：支持用户手动修改哈希打开/关闭模态框
    window.addEventListener('hashchange', function() {
        window.location.hash === '#modal-faqs' ? openModal() : closeModal();
    });
});
</script>

关键修改说明： #

• 修复重复ID问题：原代码中modal-content与外层section的ID重复，会导致DOM选择异常，已重新命名
• 复用逻辑封装：把打开/关闭模态框的代码封装成函数，避免重复编写
• 关闭事件绑定：给X图标添加点击事件，触发关闭逻辑
• 外部区域判断：通过事件目标判断，仅点击模态框空白外部区域时才关闭
• 哈希同步处理：关闭模态框时移除URL哈希，同时监听哈希变化，支持用户手动修改URL控制模态框状态
• 体验优化：打开模态框时禁止页面滚动，关闭后恢复，提升交互体验

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