原生JS实现点击模态框外部关闭功能后模态框无法打开问题求解

问题根因 #

• 点击「Show」按钮触发显示模态框的逻辑后，点击事件会向上冒泡到document节点。
• 你绑定在document上的全局点击事件是冒泡阶段执行的，此时点击目标是#show-modal按钮，不属于#modal-submit的内部元素，判断逻辑触发，会立刻给模态框重新加回hide-visibility类，等于模态框刚显示就被隐藏，所以看起来完全无法打开。

可用解决方案 #

方案1：阻止按钮点击事件冒泡 #

在显示模态框的逻辑里新增阻止冒泡的代码，避免事件传到document触发隐藏逻辑：

document.getElementById('show-modal').onclick = (e) => {
  e.stopPropagation()
  document.getElementById('modal-submit').classList.remove('hide-visibility')
}

方案2：全局事件新增模态框状态判断 #

只有模态框处于显示状态时，才执行点击外部关闭的判断，避免隐藏状态下误触发：

document.addEventListener('click', ({ target }) => {
  const modal = document.getElementById('modal-submit')
  if (!modal.classList.contains('hide-visibility') && !target.closest('#modal-submit')) {
    modal.classList.add('hide-visibility')
  }
})

方案3：绑定遮罩层关闭事件 #

不需要全局监听点击，直接给模态框的背景遮罩层绑定关闭事件，同时阻止模态框内容区域的点击冒泡即可：

1. 先给背景遮罩层加自定义ID：

<div id="modal-overlay" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

2. 新增对应事件绑定：

// 点击遮罩关闭模态框
document.getElementById('modal-overlay').addEventListener('click', () => {
  document.getElementById('modal-submit').classList.add('hide-visibility')
})
// 阻止内容区域点击事件冒泡，避免点击表单、按钮时关闭模态框
document.querySelector('#modal-submit .inline-block.align-bottom').addEventListener('click', e => {
  e.stopPropagation()
})

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