不使用jQuery如何优化模态框开关相关函数为整洁代码

完全可以通过CSS类名切换的方式优化，把状态样式和业务逻辑拆分，优化后代码更易读、易维护，具体修改如下：

第一步：修改CSS，新增状态类 #

在原有CSS基础上新增以下规则，把原来JS里写的内联样式都迁移到CSS类中：

/* 新增打开状态类 */
#modal.modal-open {
  opacity: 1;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(1);
}
#modalDarkBackground.modal-open {
  opacity: 1;
  z-index: 9998;
}
/* 新增关闭过程中的过渡类 */
#modal.modal-closing {
  transform: translate(-50%, -50%) scale(1.1);
}

第二步：替换原有JavaScript代码 #

把JS逻辑封装为统一的切换函数，仅负责类名的增删：

const modal = document.getElementById("modal");
const modalDarkBackground = document.getElementById("modalDarkBackground");
const openBtn = document.getElementById("openModal");
const closeBtn = document.getElementById("closeModal");

// 封装统一的模态框切换函数
function toggleModal(isOpen) {
  if (isOpen) {
    // 打开逻辑：直接添加打开状态类
    modal.classList.add("modal-open");
    modalDarkBackground.classList.add("modal-open");
    return;
  }
  // 关闭逻辑：先加过渡类触发缩放动画
  modal.classList.add("modal-closing");
  // 等待动画结束后移除所有状态类，时长和CSS中transition配置保持一致
  setTimeout(() => {
    modal.classList.remove("modal-open", "modal-closing");
    modalDarkBackground.classList.remove("modal-open");
  }, 500);
}

// 绑定点击事件
openBtn.addEventListener("click", () => toggleModal(true));
closeBtn.addEventListener("click", () => toggleModal(false));

优化说明 #

• 样式与逻辑完全分离：后续需要调整动画效果、样式参数直接修改CSS即可，不需要改动JS代码
• 代码精简可复用：如果有其他按钮需要控制模态框开关，直接调用toggleModal(true)（打开）或toggleModal(false)（关闭）即可
• 事件绑定更安全：使用addEventListener替代onclick赋值，不会覆盖其他同类型事件绑定

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