本文详解模态框无法关闭的根本原因：`pointer-events: none` 会阻止所有子元素响应点击事件；通过为 `.modal` 显式设置 `pointer-events: auto` 即可恢复交互功能，并附完整可运行代码与关键注意事项。

在前端开发中，模态框（Modal）是高频使用的交互组件，但一个常见却容易被忽视的陷阱是：模态容器设置了 pointer-events: none 后，其内部按钮将完全失效——即使 JavaScript 事件监听器已正确绑定，点击“关闭”按钮也毫无反应。

问题根源在于 CSS 的继承机制：pointer-events: none 不仅作用于目标元素自身，还会阻断所有后代元素的鼠标事件捕获（包括 click、hover 等）。因此，尽管你的 close1 按钮有事件监听器，但由于它被包裹在 pointer-events: none 的 .modal-container 内，浏览器根本不会将点击事件派发给它。

✅ 正确解法是分层控制指针事件：

外层遮罩容器（.modal-container）保持 pointer-events: none（初始状态避免干扰页面操作）；
内层模态内容（.modal）显式声明 pointer-events: auto，确保按钮、链接等可交互元素正常响应；
同时，.modal-container.show 切换时应设为 pointer-events: auto（而非 pointer-events: 1，后者是无效值）。

以下是修复后的完整代码（含关键注释）：

Modals are cool

practice text

/* CSS 样式 */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none; /* 初始禁用遮罩层交互 */
  transition: opacity 0.3s ease; /* 推荐添加过渡效果 */
}

.modal {
  background-color: #fff;
  width: 600px;
  max-width: 90%;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  pointer-events: auto; /* ✅ 关键修复：启用模态内容交互 */
  z-index: 10; /* 确保显示在遮罩层之上 */
}

.modal h1 { margin: 0; }
.modal p { opacity: 0.7; }

/* 显示状态：同时启用遮罩层交互与视觉可见性 */
.modal-container.show {
  opacity: 1;
  pointer-events: auto; /* ❗注意：此处必须是 'auto'，不是 '1' */
}

// JavaScript 逻辑（无需修改，原逻辑正确）
const open1 = document.getElementById('open1');
const modal_container = document.getElementById('modal_container');
const close1 = document.getElementById('close1');

open1.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close1.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

? 重要注意事项：