CSS弹窗关闭后数据未重置，需支持触发按钮关闭弹窗

一、弹窗打开时自动清空输入框 #

每次打开弹窗时，把里面所有输入框的内容清空即可。在控制弹窗显示的代码里添加一段清空逻辑：

// 获取弹窗内的所有输入框，逐个清空内容
const inputs = document.querySelectorAll('#你的弹窗ID input');
inputs.forEach(input => {
  input.value = '';
});

把这段代码放在弹窗显示的逻辑后面，比如原来打开弹窗的代码是document.getElementById('你的弹窗ID').style.display = 'block';，修改后如下：

function openPopup() {
  const popup = document.getElementById('你的弹窗ID');
  popup.style.display = 'block';
  // 新增：清空输入框
  const inputs = popup.querySelectorAll('input');
  inputs.forEach(input => input.value = '');
}

二、让触发按钮也能关闭弹窗 #

给触发按钮加个判断逻辑：点击时如果弹窗已经显示，就关闭它；如果没显示，就打开并清空输入框。代码示例：

// 获取触发按钮和弹窗元素
const triggerBtn = document.getElementById('你的触发按钮ID');
const popup = document.getElementById('你的弹窗ID');

triggerBtn.addEventListener('click', function() {
  if (popup.style.display === 'block') {
    // 弹窗已显示，执行关闭操作
    popup.style.display = 'none';
  } else {
    // 弹窗未显示，打开并清空输入框
    popup.style.display = 'block';
    const inputs = popup.querySelectorAll('input');
    inputs.forEach(input => input.value = '');
  }
});

原来的关闭按钮逻辑保留即可，比如：

const closeBtn = document.getElementById('你的关闭按钮ID');
closeBtn.addEventListener('click', function() {
  popup.style.display = 'none';
});

注意事项 #

• 把代码里的你的弹窗ID、你的触发按钮ID、你的关闭按钮ID替换成你实际HTML中对应的元素ID。
• 如果你的弹窗是用CSS类（比如class="show"）控制显示隐藏的，就把style.display === 'block'改成popup.classList.contains('show')，关闭时用popup.classList.remove('show')，打开时用popup.classList.add('show')。

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