直接用 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
如何用纯 CSS 实现带模糊的侧边栏模态框
绕过 modal-backdrop，把模糊层和内容层合并到一个容器内：用伪元素或额外 <div> 模拟 backdrop，并对其应用 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;
