如何用addEventListener实现模态弹窗？代码无报错但弹窗不显示

你原来的toggle()函数逻辑是对的，但改用addEventListener时犯了几个关键错误：事件绑定目标不对、回调函数为空，且HTML里还保留了旧的onclick属性。下面是完整的修正方案：

步骤1：移除HTML中的onclick属性 #

把所有按钮上的onclick="toggle()"删掉，改用事件监听绑定触发逻辑：

<section class="profile">
  <img class="profile__avatar" src="./images/profile-avatar.jpg" alt="Аvatar">
  <div class="profile__block">
    <div class="profile__info">
      <div class="profile__first-line">
        <p class="profile__name">Jaques</p>
        <button type="submit" class="profile__edit-button"></button>
      </div>
      <p class="profile__text">Ocean researcher</p>
    </div>
    <button type="button" class="profile__add-button"></button>
  </div>

  <div class="profile__edit-form-overlay" id="overlay">
    <div class="profile__edit-form" id="popup">
      <button class="profile__edit-form-close-icon"></button>
      <p class="profile__edit-form-text">Edit profile</p>
      <input type="text" placeholder="Name" class="profile__edit-form-first-field">
      <input type="text" placeholder="About me" class="profile__edit-form-second-field">
      <button type="submit" class="profile__edit-form-submit"></button>
    </div>
  </div>
</section>

步骤2：编写正确的JavaScript事件监听代码 #

把弹窗切换逻辑封装成可复用函数，再给所有触发元素绑定点击事件：

// 封装弹窗切换逻辑
function togglePopup() {
  const overlay = document.getElementById("overlay");
  const popup = document.getElementById("popup");
  overlay.classList.toggle("active");
  popup.classList.toggle("active");
}

// 等待DOM加载完成后绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有需要触发弹窗的元素
  const editBtn = document.querySelector(".profile__edit-button");
  const closeBtn = document.querySelector(".profile__edit-form-close-icon");
  const saveBtn = document.querySelector(".profile__edit-form-submit");
  const overlay = document.getElementById("overlay");

  // 给每个元素绑定点击事件
  editBtn.addEventListener('click', togglePopup);
  closeBtn.addEventListener('click', togglePopup);
  saveBtn.addEventListener('click', togglePopup);
  overlay.addEventListener('click', togglePopup);
});

步骤3：优化CSS选择器（可选） #

你的CSS选择器存在冗余，比如.profile__edit-form-overlay#overlay.active可简化为#overlay.active（ID选择器优先级最高，无需额外类名），修改后不影响功能且更简洁：

.profile__edit-form-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  visibility: hidden;
}

#overlay.active {
  visibility: visible;
}

.profile__edit-form {
  position: fixed;
  top: 21.08%;
  right: 33.5%;
  left: 33.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  width: 33.59%;
  min-height: 330px;
  z-index: 20;
  visibility: hidden;
}

#popup.active {
  visibility: visible;
}

关键说明 #

• 必须等待DOMContentLoaded事件再绑定事件，确保所有DOM元素加载完成
• 封装切换函数避免重复代码，所有触发按钮复用同一逻辑
• 给遮罩层绑定切换事件，符合用户点击遮罩关闭弹窗的习惯

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