如何实现弹窗关闭时背景模糊渐变消失及平滑过渡动画

你现在的问题核心是两点：

1. 用display: none/block控制弹窗显示隐藏——这个属性是瞬间切换的，没法做平滑过渡
2. 只给弹窗加了淡入动画，没做淡出，而且背景模糊的变化也没加过渡效果

下面是傻瓜式的修改步骤，直接替换代码就行，每一步都标清楚改了啥：

第一步：修正HTML的小问题 #

你的按钮标签没正确闭合，把：

<button class="closebutton" onclick="closePopup()" value="close"/> Close </button>

改成：

<button class="closebutton" onclick="closePopup()" value="close"> Close </button>

第二步：替换完整CSS代码（关键修改） #

/* 弹窗容器基础样式 */
#popupBox {
  /* 用opacity和visibility代替display，支持过渡效果 */
  opacity: 0;
  visibility: hidden;
  z-index: 1; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* 给透明度和背景模糊加过渡，时长和之前的动画保持一致 */
  transition: opacity 0.6s ease, backdrop-filter 0.6s ease;
  /* 默认模糊为0，打开时再切换成5px */
  backdrop-filter: blur(0px);
}             

/* 弹窗打开时的激活状态类 */
#popupBox.active {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(5px);
}

.popupContent {
  margin: auto;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  /* 初始位置稍微偏移，配合过渡更自然 */
  transform: translate(-50%, -60%);
  padding: 50px;
  outline: 0;
  width: 700px;
  height: 400px;
  /* 给弹窗内容加过渡，让弹出/收起更平滑 */
  transition: all 0.6s ease;
  /* 默认透明，打开时再显示 */
  opacity: 0;
}

/* 弹窗激活时，内容同步显示并回到正确位置 */
#popupBox.active .popupContent {
  opacity: 1;
  transform: translate(-50%, -50%);
}

CSS修改说明： #

• 去掉了原来的animation，改用过渡（transition） + **激活类（.active）**的方式，这样打开/关闭都能触发平滑效果
• 用opacity:0/1控制透明度，visibility:hidden/visible控制是否可点击，这两个属性都支持渐变过渡
• 给backdrop-filter加过渡，关闭时模糊值从5px降到0px，实现背景模糊平滑消失的效果
• 弹窗内容也加了过渡，打开时从透明+偏移位置变为正常显示，视觉体验更流畅

第三步：替换完整JS代码（逻辑调整） #

function openPopup() {
  // 给弹窗添加.active类，触发打开过渡
  document.getElementById("popupBox").classList.add("active");
}

function closePopup() {
  const popup = document.getElementById("popupBox");
  // 移除.active类，触发关闭过渡
  popup.classList.remove("active");
  
  // 可选：过渡完成后再隐藏display，避免弹窗关闭后误触（用visibility其实已经阻止点击，这步可加可不加）
  popup.addEventListener('transitionend', function() {
    if (getComputedStyle(popup).opacity === '0') {
      popup.style.display = 'none';
    }
  }, { once: true }); // 确保这个事件只触发一次
}

// 点击外部关闭弹窗的逻辑不变
window.onclick = function (event) {
  const modal = document.getElementById('popupBox');
  if (event.target == modal) {
    closePopup();
  } 
}

JS修改说明： #

• 打开弹窗不再直接修改display，而是添加.active类，让CSS的过渡效果自动触发
• 关闭弹窗时移除.active类，触发关闭的过渡动画（透明度降低+模糊消失）
• 可选的transitionend监听：等过渡完全结束后再隐藏display，避免潜在的点击问题

最终效果 #

现在操作弹窗会看到：

1. 打开时：背景慢慢模糊，弹窗内容从透明+偏移位置平滑显示
2. 关闭时：背景模糊逐渐消失，弹窗内容平滑透明化后隐藏，完全没有突兀的瞬间切换

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