Bootstrap 5 Modal 要真正居中且可拖拽，须先用 modal-dialog-centered 类作用于 .modal-dialog 实现垂直居中，再通过 JS 为 .modal-dialog 添加拖拽逻辑，绑定 handle 到 .modal-header 并确保 DOM 渲染就绪后初始化。
Bootstrap 5 的 Modal 默认水平居中，垂直靠顶；要让它真正居中且可拖拽，必须分两步处理：先用 modal-dialog-centered 实现垂直居中，再用 JS 给 .modal-dialog 添加拖拽逻辑——不是给 .modal，也不是用 draggable="true"，那根本无效。
modal-dialog-centered 必须加在 .modal-dialog 上
这是垂直居中的开关，不是可选项。加错位置就完全没反应：
- ✅ 正确：
<div class="modal-dialog modal-dialog-centered"> - ❌ 错误：
<div class="modal modal-dialog-centered">（.modal是display: flex，不响应transform） - ❌ 错误：
<div class="modal-content modal-dialog-centered">（.modal-content不是定位锚点）
它依赖 .modal-dialog 的 position: relative + top: 50% + transform: translateY(-50%)，这套组合天然适配滚动条和视口变化。如果用了 fade 动画，别在 CSS 里写 .modal-dialog { margin-top: 0 !important }，否则会和动画初始值冲突，导致弹出时位置跳变。
拖拽必须绑定到 .modal-dialog，且 handle 要明确
draggable="true" 对 div 容器无效，HTML5 原生拖放只适用于可选中内容（如链接、图片）。Bootstrap Modal 的拖拽必须靠 JS 手动实现：
- jQuery UI 方案最省事：监听
shown.bs.modal事件，对$(this).find('.modal-dialog')调用draggable() - 务必指定
handle: '.modal-header'，否则整个对话框都可拖，用户一碰边框就位移，体验极差 - containment 推荐用
'window'，防止拖出视口；若限定在某个容器内，得确保该容器有明确尺寸且position: relative - 纯 JS 实现时，
.modal-dialog默认是position: relative，不能用offset()设坐标，得用css({ top: 'xxxpx', left: 'xxxpx' })
多个 Modal 共存时，别用全局 $(document).on('mousedown', ...)，而应绑定到具体实例：$modal.on('mousedown', '.modal-header', handler)，且每个 Modal 的鼠标偏移量（mouseOffset）必须独立保存。
常见失效原因：DOM 挂载时机和父容器干扰
动态创建 Modal（比如 Vue/React 渲染后调用 show()）容易失败，根本原因不是代码写错，而是时机不对：
- JS 拼完 HTML 后直接
appendTo('body').modal('show')，DOM 还没完成渲染，.modal-dialog尺寸读出来是 0，modal-dialog-centered的transform计算失准，尤其在 Safari 下可能引发键盘弹出错位 - 正确顺序：先挂载到
document.body→ 等待一次重绘（requestAnimationFrame或setTimeout(, 0)）→ 再初始化并show() - 如果 Modal 被手动插进某个
position: relative的父容器（比如<div id="app">），它的定位基准就从视口变成了那个父容器，modal-dialog-centered和拖拽边界都会失效 - 检查 DevTools 里
.modal的computed display是否为flex，justify-content是否为center——比反复改类名更直接
真正容易被忽略的是：居中和拖拽都依赖 .modal-dialog 的定位模式与 DOM 渲染状态，而不是 CSS 类名堆砌或 JS 事件乱绑。一旦模态框嵌套在非 body 下、或未等 DOM 就绪就调用 show()，所有配置都会失效，而且错误现象难以复现——它只在特定设备、缩放比例或内容加载节奏下才暴露。
