Modal弹窗点击OK后无法隐藏问题求助

我设计了一个Modal弹窗，当表单中除email、contactNumber、endOfEmployment外的必填字段为空时，弹窗会触发显示。弹窗可正常弹出，但点击OK按钮后无法隐藏，已排查但未解决，恳请提供建议或帮助。

相关代码 #

<!--Required Fields modal -->
<div id="requiredFieldsModal" class="hidden fixed flex top-0 left-0 w-full h-full items-center justify-center bg-black bg-opacity-50">
    <div class="bg-white p-5 rounded-lg text-center">
        <h2 class="mb-4">Please fill in all required fields.</h2>
        <button id="confirmFill" class="mr-2 px-4 py-2 bg-yellow-400 hover:bg-yellow-500 text-white rounded">OK</button>
    </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input');
    const requiredFieldsModal = document.querySelector('#requiredFieldsModal');
    const confirmFill = document.querySelector('#confirmFill');

    form.addEventListener('submit', (event) => {
      console.log('Form submitted'); // 用于确认代码是否触发

      let hasEmptyField = false;

      inputs.forEach((input) => {
        if (input.value.trim() === '' && input.name !== 'email' && input.name !== 'contactNumber' && input.name !== 'endOfEmployment') {
          hasEmptyField = true;
        }
      });

      if (hasEmptyField) {
        event.preventDefault();
        requiredFieldsModal.classList.remove('hidden');
      }
    });

    confirmFill.addEventListener('click', () => {
      requiredFieldsModal.classList.add('hidden');
    });
  });
</script>

排查与解决方案 #

1. 确认元素选择与事件绑定有效性

先在DOMContentLoaded回调里添加日志，检查按钮是否被正确获取：

console.log(confirmFill); // 若输出null，说明按钮ID错误或DOM未加载完成

如果输出正常，尝试改用事件委托绑定点击事件，避免静态绑定可能的失效问题：

// 替换原有的confirmFill点击事件绑定
document.addEventListener('click', (e) => {
  if (e.target.matches('#confirmFill')) {
    requiredFieldsModal.classList.add('hidden');
  }
});

2. 检查hidden类样式优先级

有可能hidden类的display: none被弹窗的fixed、flex等高优先级样式覆盖。可以直接在JS中强制设置元素样式：

confirmFill.addEventListener('click', () => {
  requiredFieldsModal.style.display = 'none';
});

或者修改CSS，提升hidden类优先级：

.hidden {
  display: none !important;
}

3. 排除事件干扰

按钮点击可能触发事件冒泡或默认行为，可在事件回调中阻断：

confirmFill.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡
  e.preventDefault(); // 阻止默认行为
  requiredFieldsModal.classList.add('hidden');
});

修改后完整示例（事件委托+强制样式） #

<!--Required Fields modal -->
<div id="requiredFieldsModal" class="hidden fixed flex top-0 left-0 w-full h-full items-center justify-center bg-black bg-opacity-50">
    <div class="bg-white p-5 rounded-lg text-center">
        <h2 class="mb-4">Please fill in all required fields.</h2>
        <button id="confirmFill" class="mr-2 px-4 py-2 bg-yellow-400 hover:bg-yellow-500 text-white rounded">OK</button>
    </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input');
    const requiredFieldsModal = document.querySelector('#requiredFieldsModal');

    form.addEventListener('submit', (event) => {
      console.log('Form submitted');

      let hasEmptyField = false;
      inputs.forEach((input) => {
        if (input.value.trim() === '' && input.name !== 'email' && input.name !== 'contactNumber' && input.name !== 'endOfEmployment') {
          hasEmptyField = true;
        }
      });

      if (hasEmptyField) {
        event.preventDefault();
        requiredFieldsModal.classList.remove('hidden');
        requiredFieldsModal.style.display = 'flex'; // 确保弹窗显示
      }
    });

    // 使用事件委托绑定点击事件
    document.addEventListener('click', (e) => {
      if (e.target.id === 'confirmFill') {
        requiredFieldsModal.classList.add('hidden');
        requiredFieldsModal.style.display = 'none'; // 强制隐藏
      }
    });
  });
</script>

内容的提问来源于stack exchange，提问作者Emmanuel Louise Gonzales