直接用 modal-dialog 无法实现侧边栏效果，因为 bootstrap 的 modal 默认居中、全屏遮罩、固定宽高，modal-dialog 是块级居中容器，没有侧边停靠逻辑；强行修改 transform 或 left 会破坏响应式行为，且原生 backdrop 不支持模糊。
Bootstrap 本身不提供背景模糊（backdrop blur）效果，必须手动叠加 CSS backdrop-filter；模态框侧边栏不是 Bootstrap 内置组件，需组合 modal + 自定义定位 + 媒体查询实现。
为什么直接用 modal-dialog 无法实现侧边栏效果
Bootstrap 的 modal 默认居中、全屏遮罩、固定宽高，modal-dialog 是块级居中容器，没有侧边停靠逻辑。强行修改 transform 或 left 会破坏响应式行为（比如移动端自动转为满屏），且原生 backdrop 不支持模糊。
-
modal-dialog默认有transform: translate(-50%, -50%)，改left后需同步清除 transform 才能准确定位 - 移动端断点（
md以下）下，Bootstrap 强制将modal-dialog设为width: 100%并移除margin，需用@media (max-width: ...)覆盖 - 原生
modal-backdrop只支持透明度（opacity），模糊必须作用于 backdrop 元素本身，但 Bootstrap 的 backdrop 是独立<div>，不继承父级 filter <h3>如何用纯 CSS 实现带模糊的侧边栏模态框</h3> <p>绕过 <code>modal-backdrop，把模糊层和内容层合并到一个容器内：用伪元素或额外<div> 模拟 backdrop，并对其应用 <code>backdrop-filter: blur(8px)；侧边栏通过position: fixed+top/right/bottom控制位置。- 给模态框容器设
position: fixed; top: 0; right: 0; bottom: 0; width: 360px;（宽度按需设） - 添加子元素作为模糊背景层：
position: absolute; inset: 0; background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); - 内容层用
position: relative; z-index: 1;确保在模糊层上方 - 关闭按钮需用
position: absolute; top: 1rem; right: 1rem;，避免被模糊层遮挡 - 务必加
-webkit-backdrop-filter，Safari 仅识别该前缀
.sidebar-modal { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; background: #fff; box-shadow: -4px 0 12px rgba(0,0,0,0.1); z-index: 1055; } .sidebar-modal::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sidebar-modal .modal-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }如何兼容 Bootstrap 的关闭逻辑与键盘交互
不能丢弃 Bootstrap 的
data-bs-dismiss="modal"和Escape键支持，需复用其 JS 事件机制，但禁用默认动画和居中逻辑。- 保留
class="modal fade"和tabindex="-1"，但移除show类，由 JS 控制显隐 - 用
data-bs-backdrop="static"防止点击 backdrop 关闭，因为 backdrop 已被自定义覆盖 - 监听
hide.bs.modal事件，在隐藏时手动移除show类并重置aria-hidden - 若需点击外部关闭，给模糊层外层（即
.sidebar-modal）绑定click事件，判断event.target === this再调用bootstrap.Modal.getInstance(modalEl).hide() - 确保
aria-modal="true"和role="dialog"仍在根元素上，维持可访问性
容易被忽略的细节
模糊效果在低分辨率屏幕或旧设备上可能失效或卡顿；侧边栏在窄屏下会遮挡主要内容，但又不能简单隐藏——用户可能正依赖它操作。
-
backdrop-filter在部分 Android WebView 和 iOS 15.4 之前版本不支持，需用@supports (backdrop-filter: blur(1px))做降级（例如只加半透明白色背景） - 侧边栏打开时，主内容区域应加
overflow: hidden防止滚动条闪动，但关闭后要恢复，否则影响后续滚动 - 如果页面已有横向滚动，
fixed定位的侧边栏可能因父容器transform或perspective被截断，需检查最近的transform祖先元素 - 触摸设备上，侧边栏边缘滑动易触发页面回弹，建议对
.sidebar-modal加touch-action: pan-y;
- 给模态框容器设
