点击弹出层外部关闭弹窗功能实现报错求助

报错原因分析 #

你遇到的InvalidCharacterError是因为错误地把函数当成类名字符串传给了classList.add()：在激活按钮的点击事件里，你写了activateBtn.classList.add(openPopOut)，但classList.add()需要的是类名的字符串，而你传了一个函数对象，JS会把函数转换成带空格、特殊字符的字符串，不符合类名规则，因此报错。

除此之外，你的外部点击关闭逻辑也存在问题，下面是完整的修正方案：

核心错误修正点 #

1. 修复弹窗触发逻辑：把激活按钮的点击事件改回直接调用openPopOut函数，而非给按钮添加类。
2. 修正外部点击关闭逻辑：
   • 点击外部时应移除控制弹窗显示的open类，而非pop-out基础类（移除后者会丢失弹窗的基础样式）
   • 判断逻辑调整为：仅当点击目标不在弹窗及其子元素范围内时，才关闭弹窗

修正后的完整代码 #

JavaScript 代码

const activateBtn = document.querySelector(".activate-btn");
const html = document.querySelector("html");
const popOut = document.querySelector(".pop-out");
const popOutCloseBtn = popOut.querySelector(".pop-out__close-btn");

function openPopOut() {
  popOut.classList.add("open");
  setTimeout(closePopOut, 8000);
}

function closePopOut() {
  popOut.classList.remove("open");
}

// 修复：直接绑定弹窗打开函数
activateBtn.addEventListener("click", openPopOut);

popOutCloseBtn.addEventListener("click", closePopOut);

// 修复外部点击关闭逻辑
html.addEventListener("click", function (e) {
  // 判断点击目标是否在弹窗外部
  if (!popOut.contains(e.target)) {
    closePopOut();
  }
});

CSS 代码（保留原样式，无需修改）

body {
  display: flex;
  width: 100%;
  height: 100%;
}

button {
  cursor: pointer;
}

.activate-btn {
  margin: auto;
}

.pop-out {
  position: absolute;
  bottom: 32px;
  right: 32px;
  display: flex;
  width: 175px;
  height: 100px;
  background-color: cornflowerblue;
  border: 1px solid;
  border-radius: 4px;
  transform: translateX(210px);
  transition: transform 333ms ease-out;
}

.pop-out__close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: transparent;
  font-weight: bold;
  border: none;
}

.pop-out__msg {
  margin: auto;
}

.pop-out.open {
  transform: translateX(0);
}

HTML 代码（保留原结构，无需修改）

<html>
<button class="activate-btn">Activate</button>

<div class="pop-out">
  <button class="pop-out__close-btn">X</button>
  <h3 class="pop-out__msg">Hello!</h3>
</div>
</html>

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