bootstrap modal 不支持 width 配置项，因宽度属 css 职责；应改 .modal-dialog 的 max-width 或设 --bs-modal-max-width 变量，并调用 handleupdate() 重定位。
Bootstrap Modal 没有原生 JS 配置项支持动态设置宽度，$('#myModal').modal({ width: '800px' }) 会静默失败或报错——这不是漏写了 API，而是设计上就不提供这个能力。
为什么 modal() 方法不接受 width 参数
Bootstrap 的 modal() 构造函数（无论是 jQuery 版还是 Bootstrap 5+ 的纯 JS 版）只接受有限的配置项，如 backdrop、keyboard、focus 等，width 不在其中。官方文档从未声明支持该参数，任何尝试传入都会被忽略。
- jQuery 版本（Bootstrap 4/5）调用
$('#myModal').modal({ width: '800px' })：无报错但无效果 - Bootstrap 5.2+ 原生 JS 版本调用
new bootstrap.Modal(modalEl, { width: '800px' })：直接抛出TypeError或静默丢弃 - 错误根源是：宽度控制属于 CSS 层级职责，JS 层只负责开关、生命周期和定位逻辑
动态改宽必须操作 DOM + 触发重定位
要在 JS 中动态设宽，本质是修改 .modal-dialog 的 max-width 样式，并手动通知 Bootstrap 重新计算居中位置；否则会出现偏移、滚动异常或遮罩层错位。
- 正确写法（Bootstrap 5.2+）：
const modalEl = document.getElementById('myModal'); const modal = bootstrap.Modal.getInstance(modalEl); modalEl.querySelector('.modal-dialog').style.maxWidth = '90vw'; modal.handleUpdate(); // ⚠️ 必须调用，否则 transform 偏移仍按旧尺寸算 - 若禁用了动画（
data-bs-animation="false"），需额外清除 transform：modalEl.querySelector('.modal-dialog').style.transform = 'none'; - 避免直接改
width：它破坏 flex 居中逻辑，max-width才是 Bootstrap 内部依赖的计算基准
用 CSS 变量比内联样式更稳
Bootstrap 5.2+ 支持通过 CSS 自定义属性控制模态框尺寸，优先级高于 class，且不影响响应式断点逻辑。JS 中设置变量比反复操作 style.maxWidth 更干净。
- 推荐方式：
modalEl.style.setProperty('--bs-modal-max-width', '850px'); - 优势：无需选中子元素、不干扰现有 class、媒体查询仍可覆盖（例如
@media (max-width: 768px) { .modal { --bs-modal-max-width: 95vw; } }） - 注意：变量作用于
.modal元素本身，不是.modal-dialog；设置后仍需调用handleUpdate()
容易被忽略的三个副作用
改宽不是“设个值就完事”，以下三点常导致上线后才发现异常：
-
.modal-body不会自动获得滚动条：需手动加max-height: calc(100vh - 180px)并设overflow-y: auto，否则内容溢出到页面主体 -
.modal-backdrop的z-index可能被覆盖：确保它比.modal至少低 1（默认1050vs1055），否则点击无效或遮罩不全 - 多次调用
handleUpdate()后transform累积偏差：建议每次改宽前先重置transform，尤其在频繁 resize 场景下
