如何在JavaScript中定位::backdrop伪元素以关闭模态框？

核心问题分析 #

1. 伪元素无法通过DOM选择器获取：::backdrop是CSS生成的伪元素，不属于DOM节点，因此无法用querySelector或类似方法直接选中，这是你代码中出现事件监听器错误的根本原因。
2. 内部伪类不应使用：:-internal-dialog-in-top-layer是浏览器内部私有伪类，非标准写法，不具备兼容性，不能用于业务代码。
3. backdrop不存在close事件：只有<dialog>元素本身拥有close事件，试图给backdrop绑定该事件完全无效。

正确实现点击任意区域关闭弹窗的方法 #

不需要单独处理backdrop，直接监听<dialog>的click事件，判断点击的是否是弹窗的背景区域（即点击目标为<dialog>元素本身，而非它的子元素），如果是则关闭弹窗。

修正后的完整代码 #

JavaScript

const openModalButton = document.querySelectorAll(".open-modal");
const modal = document.querySelector(".video-modal");
const video = document.querySelector(".video-modal video");

// 绑定所有打开弹窗的按钮事件
openModalButton.forEach(btn => {
  btn.addEventListener("click", () => {
    modal.showModal();
    // video.play(); // 需要自动播放的话取消注释
  });
});

// 弹窗关闭时统一暂停视频
modal.addEventListener("close", () => {
  video.pause();
});

// 点击backdrop区域关闭弹窗
modal.addEventListener("click", (e) => {
  // 点击目标为dialog本身时，判定为点击了背景
  if (e.target === modal) {
    modal.close();
  }
});

CSS

#retirement-services dialog.video-modal {
  border: none;
  padding: 40px;
  border-radius: 21px;
  transition: all 0.2s ease-in-out;
}
#retirement-services .video-modal-close {
  border: none;
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  height: 25px;
  width: 25px;
  background-color: #e5e1de;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#retirement-services .open-modal {
  cursor: pointer;
}
/* 可选：自定义backdrop的背景样式 */
#retirement-services dialog.video-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

HTML

<div class="col open-modal">
  <div class="play-button open-modal" style="position: absolute">
    click me
  </div>
  <dialog class="video-modal">
    <form method="dialog">
      <button class="video-modal-close">X</button>
    </form>
    <video controls width="220">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    </video>
  </dialog>
</div>

额外说明 #

• 原代码中存在两个.open-modal元素，用querySelector只会选中第一个，改用querySelectorAll遍历绑定才能确保所有触发按钮生效。
• 若需要自定义backdrop样式，直接通过dialog::backdrop编写CSS即可，无需操作DOM。

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