显示注册表单时如何模糊#login登录区块的背景？

CSS 新增规则 #

/* 模糊效果专用类 */
.blur {
  filter: blur(4px);
  -webkit-filter: blur(4px);
}
/* 给登录区块加过渡，效果更顺滑 */
#login {
  transition: filter 0.3s ease;
  /* 原有样式保留即可 */
}
/* 注册表单要设置足够高的层级，避免被模糊区块遮挡 */
#id01 {
  z-index: 999;
  position: fixed; /* 已有fixed定位就不用改，只要保证在正常文档流外、层级高于login即可 */
  /* 原有样式保留即可 */
}

JS 逻辑修改 #

找到你触发注册表单弹出的按钮事件回调，新增类名切换逻辑即可：

// 打开注册表单逻辑
document.querySelector('你的注册触发按钮选择器').addEventListener('click', () => {
  document.getElementById('id01').style.display = 'block';
  // 给登录区块加模糊类
  document.getElementById('login').classList.add('blur');
})

// 关闭注册表单逻辑
document.querySelector('你的注册关闭按钮选择器').addEventListener('click', () => {
  document.getElementById('id01').style.display = 'none';
  // 移除模糊类
  document.getElementById('login').classList.remove('blur');
})

避坑提示 #

• 注册表单#id01不能放在#login区块内部，否则父元素的模糊效果会同步作用到子元素上，导致注册表单也变模糊
• 如果需要兼容特别老的浏览器，可以用半透明黑色遮罩叠加在#login上替代模糊效果，实现思路一致，切换类名修改遮罩透明度即可

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