表单弹窗失效问题：双按钮对应打开不同表单时第二个按钮无响应

问题根源 #

1. 缺少删除按钮事件绑定：JS代码未给「删除记录」按钮添加点击事件，也无对应弹窗激活逻辑
2. 重复ID冲突：页面重复使用#closeButton、#id、#contact等ID，querySelector仅会获取第一个匹配元素，导致第二个弹窗的关闭按钮等元素无法被正确选中
3. 删除弹窗激活类未关联：删除弹窗的popup1和表单del对应的激活类popup_open1、open1未在JS中调用

修复后的完整代码 #

HTML（修正重复ID） #

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="new.css" rel="stylesheet" />
  <script src="index.js" defer></script>
</head>
<body>
  <!-- 添加表单弹窗 -->
  <div class="popup">
    <div class="popup__container">
      <div class="popup__wrapper">
        <div id="wrapper">
          <form method="POST" class="form">
            <button class="exit" id="closeButton">х</button>
            <div class="string">
              <label for="id-add">Надпись:</label>
              <input type="number" id="id-add" name="id_k1" required>
            </div>
            <div class="string">
              <label for="N_m">Надпись:</label>
              <input type="text" id="N_m" name="n_mine" required>
            </div>
            <div class="string">
              <label for="name">Надпись:</label>
              <input type="text" id="name" name="name_mine" required>
            </div>
            <div class="string">
              <label for="Adr">Надпись:</label>
              <input type="text" id="Adr" name="adress" required>
            </div>
            <div class="string">
              <label for="Full_name">Надпись:</label>
              <input type="text" id="Full_name" name="full_name_of_direcor" required>
            </div>
            <div class="string">
              <label for="Phone">Надпись:</label>
              <input type="tel" id="Phone" name="phone_number" required>
            </div>
            <button type="submit" name="submit" id="contact-add">Отправить в БД</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <button id="button" class="button">Открыть форму</button>

  <!-- 删除表单弹窗 -->
  <div class="popup popup1">
    <div class="popup__container">
      <div class="popup__wrapper">
        <div id="wrapper1">
          <form method="POST" class="form del">
            <button class="exit" id="closeButton1">х</button>
            <p>Введите или выберете номер записи, которую хотите удалить</p>
            <div class="string">
              <label for="id-del">Надпись:</label>
              <input type="number" id="id-del" name="id_k1" required>
            </div>
            <button type="submit" name="submit" id="contact-del">Удалить запись</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <button id="del-btn" class="del1">Удалить запись</button>
</body>
</html>

CSS（复用样式减少冗余） #

.form {
  display: none;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

.open {
  display: block;
}

#id-add, #id-del,
#N_m,
#name,
#Adr,
#Full_name,
#Phone {
  width: 305px;
}

.exit {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 10px;
  background-color: darkgrey;
}

#wrapper, #wrapper1 {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.string {
  display: grid;
  grid-template-columns: 0.65fr 0.65fr;
  margin-top: 10px;
}

.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(17, 17, 17, 0.5);
  transition: all 0.5s ease;
  display: none;
}

.popup_open {
  display: block;
}

.popup__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  max-width: 588px;
  width: 100%;
}

.popup__wrapper {
  padding: 40px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.del1 {
  color: red;
  border-radius: 5px;
}

JS（完善双弹窗逻辑） #

// 添加表单相关元素
const addButton = document.querySelector('#button');
const addCloseButton = document.querySelector('#closeButton');
const addForm = document.querySelector('.form:not(.del)');
const addPopup = document.querySelector('.popup:not(.popup1)');

// 删除表单相关元素
const delButton = document.querySelector('#del-btn');
const delCloseButton = document.querySelector('#closeButton1');
const delForm = document.querySelector('.del');
const delPopup = document.querySelector('.popup1');

// 添加表单弹窗逻辑
addButton.addEventListener('click', () => {
  openPopup(addPopup, addForm);
});

addCloseButton.addEventListener('click', () => {
  closePopup(addPopup, addForm);
});

// 删除表单弹窗逻辑
delButton.addEventListener('click', () => {
  openPopup(delPopup, delForm);
});

delCloseButton.addEventListener('click', () => {
  closePopup(delPopup, delForm);
});

// 通用弹窗开关函数
function openPopup(popupElement, formElement) {
  formElement.classList.add('open');
  popupElement.classList.add('popup_open');
}

function closePopup(popupElement, formElement) {
  formElement.classList.remove('open');
  popupElement.classList.remove('popup_open');
}

核心修复点说明 #

1. 给删除按钮绑定点击事件，新增对应弹窗开关逻辑
2. 修正所有重复ID，确保每个元素ID唯一
3. 复用弹窗和表单基础样式，减少冗余代码，保留原有动画效果
4. 封装通用的openPopup和closePopup函数，避免代码重复

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