如何在弹窗弹出时禁用页面背景滚动？

你现有代码的问题很明确：一是遮罩层没设置堆叠层级，会和页面其他元素重叠；二是没有对页面根节点做滚动限制，仅靠z-index只能控制元素显示顺序，没法阻止背景滚动。以下方案适配你当前用:target实现的纯CSS弹窗逻辑，不需要复杂JS：

1. 修复元素重叠问题 #

给.overlay遮罩层添加z-index属性，确保它显示在所有普通页面内容之上：

.overlay {
  /* 保留你原有的样式 */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  /* 新增以下样式 */
  z-index: 999;
}

z-index只要比你页面其他普通元素的层级高就可以，999是通用安全值

另外你贴出的CSS代码里，末尾的移动端媒体查询少了一个闭合大括号，记得补上，否则小屏设备的弹窗宽度样式会失效：

@media screen and (max-width: 700px){
  .popup{
    width: 70%;
  }
}

2. 编写滚动锁定样式 #

把你之前留空的.bg-noscroll类补充完整，作用是锁定页面视口、隐藏溢出内容，从根源上禁止页面滚动：

.bg-noscroll {
  overflow: hidden;
  height: 100vh;
}

记得删掉你<body>标签上默认加的bg-noscroll bg-scroll类，页面默认状态要保持可滚动，只有弹窗打开时才需要应用这个锁定样式。

3. 自动触发滚动锁定（无JS方案） #

如果不想写JS，直接用CSS :has()伪类就能实现弹窗打开时自动锁定背景，完全适配你现在用锚点触发弹窗的逻辑：

/* 当弹窗被锚点激活时，自动给body加滚动锁 */
body:has(.overlay:target) {
  overflow: hidden;
  height: 100vh;
}

这个方案兼容所有现代浏览器：点击打开按钮触发#popup成为目标元素时，自动锁定滚动；点击关闭按钮回到页首锚点消失时，滚动自动恢复。

旧浏览器兼容方案（可选，极简JS） #

如果需要兼容不支持:has()的旧版浏览器，加几行非常简单的JS即可，逻辑就是弹窗打开时给body加锁类，关闭时移除：

<script>
// 点击打开按钮时锁定背景
document.querySelector('.popupBG-Disable').addEventListener('click', () => {
  document.body.classList.add('bg-noscroll')
})
// 点击关闭按钮时恢复滚动
document.querySelector('.popup .close').addEventListener('click', () => {
  document.body.classList.remove('bg-noscroll')
})
</script>

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