Vanilla JS模态框：URL哈希直接打开后无法点击关闭图标或外部关闭的解决方法

嘿，我来帮你搞定这个模态框关闭的问题！你已经实现了通过URL hash打开模态框的功能，现在只需要添加两个事件监听就能实现两种关闭方式啦，具体看下面的实现：

完整实现代码 #

把你的script部分替换成下面的代码，我已经加好了完整的关闭逻辑：

<section id="faqs">
 <div class="section-content">
  <div class="container">
   <div class="modal" id="modal-faqs">
    <div class="modal-content" id="faqs">
     <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() {
  const modal = document.getElementById('modal-faqs');
  const closeBtn = document.querySelector('.modal-close');

  // 保留你原来的初始打开逻辑
  if (window.location.hash === '#modal-faqs') {
   modal.style.display = 'block';
  }

  // 点击右上角关闭图标关闭模态框
  closeBtn.addEventListener('click', function() {
   modal.style.display = 'none';
   // 移除URL中的hash，避免刷新页面时自动重新打开模态框
   window.location.hash = '';
  });

  // 点击模态框外部区域关闭
  modal.addEventListener('click', function(event) {
   // 只有点击到模态框本身（而非内部的内容区域）才触发关闭
   if (event.target === modal) {
    modal.style.display = 'none';
    window.location.hash = '';
   }
  });
 });
</script>

关键逻辑说明 #

• 关闭按钮功能：通过querySelector获取到右上角的关闭图标，给它绑定click事件，触发时隐藏模态框，同时清空URL的hash值——这样用户刷新页面时就不会再次自动打开模态框，体验更合理。
• 外部区域关闭：给模态框容器本身绑定click事件，利用event.target判断点击的元素是不是模态框的背景区域：内部的.modal-content是我们的核心内容区，点击这里不应该关闭，只有点击模态框的灰色背景部分才触发关闭逻辑。

现在你可以测试一下，点击右上角的X或者模态框外部区域，都能正常关闭模态框啦！

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