调整弹窗元素嵌套顺序后点击侧边无法关闭的问题求助

问题原因分析 #

你调整嵌套顺序后，.containerlog作为块级元素默认宽度100%，它完全覆盖了.modal的左右区域。而你的关闭逻辑是仅当点击事件的目标是.modal本身时才关闭弹窗：

if (event.target == modal) {
  modal.style.display = "none";
}

所以点击左右区域时，事件目标是.containerlog而非.modal，不会触发关闭；而上下区域因为.modal-content设置了margin:5% auto 15% auto，.containerlog的高度仅包裹.modal-content，上下部分仍属于.modal背景，点击时能触发关闭。

解决方案（二选一即可） #

方案1：调整容器样式，避免覆盖.modal背景

修改.containerlog和.containerreg的CSS，让它们仅包裹弹窗内容区域，不占满.modal宽度：

.containerlog {
  text-align: center;
  width: 400px; /* 和.modal-content宽度保持一致 */
  margin: 5% auto 15% auto; /* 和.modal-content的margin保持一致 */
}

.containerreg {
  text-align: center;
  display: none;
  width: 400px;
  margin: 5% auto 15% auto;
}

这样修改后，.containerlog/.containerreg只会占据中间的弹窗区域，左右区域回归.modal背景，点击即可触发关闭逻辑。

方案2：修改JS判断逻辑，兼容嵌套结构

如果不想调整CSS，可以修改关闭逻辑，只要点击的不是弹窗内容（.modal-content及其子元素）就关闭弹窗：

// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal content, close it
window.onclick = function(event) {
  const modalContent = modal.querySelector('.modal-content');
  // 点击的是modal本身，或者点击的元素不在弹窗内容区域内
  if (event.target === modal || !modalContent.contains(event.target)) {
    modal.style.display = "none";
  }
}

这个逻辑更通用，无论后续怎么调整嵌套结构，只要弹窗内容在.modal-content里，点击外部区域就能关闭。

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