如何在Alert弹窗触发时为整个文档添加Blur模糊效果并修正代码？

先梳理你现有代码的问题，再给出完整的修正方案：

现有代码的问题 #

• JavaScript：使用了中文单引号（‘’），属于语法错误，必须替换为英文单引号（''）；同时你的HTML中不存在#main和#t_TreeNav元素，选择器无法匹配到目标内容。
• CSS：.body是类选择器，但你需要选中的是<body>标签，应改为body；heigh拼写错误，正确写法是height；background-image的URL末尾多了一个双引号，存在语法错误。
• HTML：缺少JS代码中指定的#main和#t_TreeNav元素；另外原生alert是阻塞式弹窗，需要在弹窗触发前添加模糊效果，弹窗关闭后再移除。

完整修正代码 #

HTML #

<body>
  <div id="page-content">
    <h2>This is a sample paragraph.</h2>
    <button onclick="triggerAlert()">触发弹窗</button>
  </div>
</body>

CSS #

body {
  height: 100vh; /* 用100vh占满视口高度更灵活 */
  margin: 0;
  background-image: url(https://carontestudio.com/img/caronte-web-estudio-logo.png);
  background-size: 10rem;
  background-repeat: no-repeat; /* 避免背景图重复显示 */
}

#page-content {
  padding: 2rem;
  transition: filter 0.3s ease; /* 添加过渡动画，让模糊效果更平滑 */
}

.blur {
  filter: blur(8px);
  -webkit-filter: blur(8px); /* 兼容webkit内核浏览器 */
}

JavaScript #

// jQuery版本（需确保页面已引入jQuery）
function triggerAlert() {
  // 弹窗前给内容容器添加模糊类
  $('#page-content').addClass('blur');
  // 原生alert是阻塞的，弹窗关闭后自动执行移除模糊的代码
  alert('这是测试弹窗');
  $('#page-content').removeClass('blur');
}

// 原生JS版本（无需依赖jQuery）
// function triggerAlert() {
//   const content = document.getElementById('page-content');
//   content.classList.add('blur');
//   alert('这是测试弹窗');
//   content.classList.remove('blur');
// }

关键说明 #

1. 将页面内容统一放在一个容器（如#page-content）中，对该容器添加模糊效果，避免弹窗本身被模糊（原生alert属于浏览器层级，不会受影响；如果是自定义弹窗，需要注意设置弹窗的层级高于模糊容器）。
2. 原生alert是阻塞式弹窗，弹窗关闭后会自动执行后续的移除模糊代码；如果使用自定义弹窗，需要在弹窗关闭的回调函数中移除模糊类。
3. 为模糊效果添加过渡动画，让模糊和取消模糊的过程更自然流畅。

内容的提问来源于stack exchange，提问作者Saza.P