如何用原生JS实现点击HTML5 dialog外部区域关闭弹窗功能

核心原理 #

使用showModal()打开的原生<dialog>元素，点击外部遮罩区域时，事件触发对象为<dialog>本身；点击弹窗内部内容时，事件触发对象为弹窗内的子元素，我们可以通过这个差异实现点击外部关闭的逻辑。

代码实现 #

直接在全局添加如下纯JS代码即可，无需修改你现有逻辑，也适配多个弹窗的场景：

// 全局绑定所有原生dialog的点击外部关闭事件
document.addEventListener('click', function(e) {
  // 仅当点击对象为dialog元素本身时触发关闭
  if (e.target.tagName === 'DIALOG') {
    e.target.close();
  }
});

可选优化 #

如果你需要保留部分弹窗不支持点击外部关闭，可给对应dialog添加自定义属性做排除判断：

1. HTML部分给不需要关闭的dialog加属性：

<dialog id="xxx" data-no-outside-close>
  <!-- 弹窗内容 -->
</dialog>

2. 修改JS判断逻辑：

document.addEventListener('click', function(e) {
  const targetEl = e.target;
  if (targetEl.tagName === 'DIALOG' && !targetEl.hasAttribute('data-no-outside-close')) {
    targetEl.close();
  }
});

注意事项 #

不要给dialog内部的子元素绑定click事件时调用e.stopPropagation()，否则会阻断事件冒泡导致外部关闭逻辑失效。

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