如何在Javascript中定位::backdrop来关闭模态框？

Question

我有一个使用对话框元素的模式弹出窗口，它创建了一个背景伪元素。我希望人们能够单击导致模式关闭的任何地方。但是我无法完全定位该元素以将其关闭。以下是我尝试过的。它给我一个错误，说它无法读取事件侦听器的属性。有人知道如何定位这个伪元素吗？

   const openModalButton = document.querySelector(".open-modal");
        const modal = document.querySelector(".video-modal");
        const backdrop = document.querySelector("dialog:-internal-dialog-in-top-layer::backdrop");
        const video = document.querySelector(".video-modal video");

        openModalButton.addEventListener("click", function onOpen() {
          modal.showModal();
          //if we want autoplay, disable comment below
          //video.play();
        });

        modal.addEventListener("close", function onClose() {
          video.pause();
        });
        backdrop.addEventListener("close", function onClose() {
          video.pause();
        });

#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-block;
}
#retirement-services .open-modal {
  cursor: pointer;
}

    <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>

Answer 1

我认为

pseudo-element

不支持事件处理程序。但是，即使单击对话框的背景背景也会触发单击事件，因此您可以改用模态上的单击事件。

在处理程序中，使用

e.target === e.currentTarget

检查事件是否没有被模态中的元素冒泡。

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

openModalButton.addEventListener("click", function onOpen() {
  modal.showModal();
});

modal.addEventListener("close", function onClose() {
  video.pause();
});

document.querySelector(".video-modal").addEventListener('click', function(e) {
  if (e.target === e.currentTarget) {
    e.stopPropagation();
    modal.close();
  }
})

#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-block;
}

#retirement-services .open-modal {
  cursor: pointer;
}

<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>