点开弹窗后背景仍可滚动，根本原因是遮罩层未设position: fixed及全屏尺寸，或页面主体未同步设置overflow: hidden；应通过js在打开时执行document.body.style.overflow = 'hidden'、关闭时还原为空字符串。
为什么点开弹窗后背景还能滚动？
这是最常见的“伪模态”问题：遮罩层 #modal-overlay 没有设 position: fixed，或者没加 top: 0; left: 0; width: 100%; height: 100%。更隐蔽的是，页面主体没加 overflow: hidden —— 即使遮罩盖住了，用户仍可滚底层内容。
- 打开弹窗时，必须同步执行：
document.body.style.overflow = 'hidden' - 关闭弹窗时，记得还原：
document.body.style.overflow = ''（别写'auto'，会覆盖用户自定义的scroll或clip） - 如果用了 Bootstrap，确认没漏掉
data-bs-backdrop="static"（v5.3+）或data-backdrop="static"（v4），否则点击遮罩就直接关了
WebStorm 里怎么快速补全模态框结构？
别手敲三遍 div 套娃。用 Live Templates 真正省时间：
- 进
Settings → Editor → Live Templates，点+→Live Template - Abbreviation 填
modal，Template text 粘贴这个（注意保留换行和缩进）：<div id="$ID$" class="modal"> <div class="modal-overlay" onclick="close$ID$()"></div> <div class="modal-content"> <button onclick="close$ID$()">×</button> $END$ </div> </div> - 点
Define，只勾选HTML；再点Edit variables，给ID设 Expression 为camelCase(fileNameWithoutExtension())，这样新建login.html时自动填id="loginModal"
点击遮罩关闭但按钮没反应？检查事件绑定时机
常见错误是 JS 代码放在 里，而 DOM 还没加载完，document.getElementById('openModal') 返回 null。
- 要么把
<script></script>放在前 - 要么用
DOMContentLoaded包一层：document.addEventListener('DOMContentLoaded', () => { const openBtn = document.getElementById('openModal'); if (openBtn) openBtn.addEventListener('click', () => { document.getElementById('myModal').style.display = 'block'; }); }); - 别依赖
onclick="..."写死在 HTML 里——WebStorm 虽能跳转，但后期维护难，且无法统一处理多个弹窗的关闭逻辑
Esc 键关不掉？得手动监听 keydown
原生模态框不自动响应 Esc，必须自己加监听。容易漏的点是：没限定只在模态框显示时监听，导致全局按 Esc 都触发关闭。
- 在打开弹窗函数里加：
document.addEventListener('keydown', handleEsc) - 在关闭函数里移除：
document.removeEventListener('keydown', handleEsc) -
handleEsc函数内必须检查event.key === 'Escape'且当前有可见模态框（比如getComputedStyle(modal).display !== 'none'） - 别用
event.keyCode—— 已废弃，WebStorm 的代码检查会标黄警告
