如何在SweetAlert2激活时更改HTML背景并关闭后恢复

核心逻辑 #

借助SweetAlert2的生命周期钩子，在弹窗启动时修改页面背景，关闭后还原初始样式。

具体实现步骤 #

• 先保存初始背景样式
  提前把页面body的初始背景存到变量里，方便后续恢复：

  const originalBg = document.body.style.background;
  

• 调用弹窗时配置钩子
  用willOpen钩子在弹窗即将显示时切换背景，didClose钩子在弹窗彻底关闭后还原：

  Swal.fire({
    title: '示例弹窗',
    text: '极简版SweetAlert2演示',
    confirmButtonText: 'OK',
    // 弹窗即将打开时触发
    willOpen: () => {
      // 可设置纯色或图片背景，二选一即可
      document.body.style.background = '#2c3e50'; // 纯色示例
      // 图片背景写法：document.body.style.background = 'url("你的图片路径") center/cover no-repeat';
    },
    // 弹窗完全关闭后触发
    didClose: () => {
      // 恢复初始背景
      document.body.style.background = originalBg;
    }
  });
  

• 可选：添加过渡动画
  想要背景切换更顺滑，给body加个CSS过渡效果：

  body {
    transition: background 0.3s ease;
  }
  

补充技巧 #

如果页面背景是通过CSS类控制的，用添加/移除类的方式更灵活：

// 打开弹窗时添加自定义类
document.body.classList.add('swal-active-bg');
// 关闭弹窗时移除类
document.body.classList.remove('swal-active-bg');

对应的CSS样式：

.swal-active-bg {
  background: #2c3e50 !important; /* 替换成你需要的背景样式 */
}

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