弹窗显示异常：表单提交后Popup仅显示不足1秒即自动隐藏

问题核心：点击表单提交按钮时，浏览器会默认触发表单的页面刷新行为，导致刚添加的弹窗显示类在页面刷新后被重置，所以弹窗仅显示瞬间就消失。

解决方法：阻止表单的默认提交行为，让页面不刷新，弹窗就能正常保留显示。

具体实现代码 #

在你的JavaScript逻辑中添加以下代码：

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault();
  
  // 执行弹窗显示逻辑
  const popup = document.querySelector('.popup');
  const formDiv = document.querySelector('.form');
  
  popup.classList.add('popup-open');
  formDiv.classList.add('popup-form');
});

补充说明 #

• 如果你之前是通过点击按钮（#btn）来触发逻辑，也要确保在按钮的点击事件中同样阻止默认行为，或者直接监听表单的submit事件更稳妥。
• 阻止默认行为后，你还可以根据需求添加表单数据的异步提交逻辑（比如用fetch发送数据），不会影响弹窗的显示。

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