为什么点击模态登录弹窗外部区域时，登录框无法正常关闭？

核心错误原因 #

• JS加载时机错误：你将modal_js.js的引用放在了<head>标签内，浏览器加载并执行该JS文件时，<body>中的模态框DOM元素（id为id01）还未完成解析渲染，因此document.getElementById('id01')会返回null，后续绑定的点击判断逻辑完全不生效。
• 可选排查项：如果调整加载时机后仍然失效，需要检查CSS中.modal类的配置，确保该元素是全屏覆盖视口的，否则点击外部区域不会触发event.target == modal的判断。

修复方案 #

方案1：调整JS引用位置 #

将<script src="modal_js.js"></script>从<head>标签内移动到</body>闭合标签之前，保证所有DOM元素解析完成后再执行JS逻辑，示例结构如下：

<body>
  <!-- 所有页面内容代码 -->
  <script src="modal_js.js"></script>
</body>

方案2：包裹DOM加载完成监听事件 #

不调整JS引用位置的前提下，修改modal_js.js内的代码，将逻辑包裹在DOMContentLoaded事件回调中，等待DOM解析完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  var modal = document.getElementById('id01');
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
})

方案3：检查模态框CSS配置 #

确保.modal类包含全屏覆盖的样式配置，参考示例：

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.4);
}

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