如何阻止操作Overlay内表单时弹窗自动关闭？

核心问题分析 #

• 表单提交触发页面刷新：你创建的resBtn是<button>元素，在表单内默认type="submit"，点击后会触发表单提交。由于表单action设为空，浏览器会默认刷新当前页面，导致弹窗直接消失。
• 关闭按钮类名错误：resCloseImg.classList.add('.close-respopup'); 中类名多了前缀点，应该写'close-respopup'，否则后续document.querySelector('.close-respopup')无法找到该元素。

具体修复方案 #

1. 阻止表单默认提交行为 #

有两种可选方式：

方式一：将按钮设为普通按钮

给按钮添加type="button"属性，避免触发表单提交：

const resBtn = document.createElement('BUTTON');
resBtn.type = 'button'; // 新增该行代码
resBtn.innerHTML = 'Reserve';
resBtn.classList.add('res-btn');

方式二：监听表单提交并阻止默认行为

如果需要保留按钮的submit类型（比如要做表单验证后提交），可以给表单添加提交事件监听：

reservationForm.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止页面刷新的默认行为
  // 此处编写表单处理逻辑，比如收集数据、发送请求等
});

2. 修复关闭按钮的类名 #

去掉类名前的点：

resCloseImg.classList.add('close-respopup');

3. 优化事件绑定逻辑 #

当前代码每次点击reserveBttn都会重复绑定关闭按钮的click事件，多次点击后会触发多次页面刷新。建议改为在创建关闭按钮时直接绑定事件：

// 创建关闭按钮后直接绑定事件
resCloseImg.addEventListener('click', () => {
  window.location.reload();
});

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