Bootstrap 模态框Modal内容加载中Spinner设置
Modal spinner不显示因modal-body提前渲染，需清空后插入；遮挡问题需调整z-index和定位；卡顿需禁用scale改用em单位；失败残留须在always/catch/finally中清理。
Modal 内容加载时 spinner 不显示？检查 modal-body 是否被提前渲染
常见现象是调用 $modal.load() 或手动插入 AJAX 内容前，modal-body 已有占位内容（比如空 <div></div>），导致 spinner 插入后被覆盖或未触发重绘。Bootstrap Modal 默认不接管内容加载逻辑，它只负责弹出容器，内部状态得你手动控制。
正确做法是：在发起请求前清空 modal-body，再插入 spinner 元素；等 AJAX 返回成功后再替换为真实内容。
- 不要依赖
data-remote属性自动加载——它已从 Bootstrap 5 移除，且无法控制 loading 状态 - 用
$modal.find('.modal-body').empty().append('<div class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></div>')显式插入 - 如果 modal 尚未初始化（
.modal('show')未调用），先 show 再 append，否则部分浏览器可能不触发渲染
自定义 spinner 被 Modal 背景遮住？z-index 和定位必须匹配 Modal 的层级体系
Bootstrap 5 Modal 的 backdrop 是 z-index: 1050，modal-content 是 z-index: 1055。如果你把 spinner 直接插在 modal-body 里，它默认继承父级堆叠上下文，但若 modal-body 有 overflow: hidden 或 transform 触发新层叠上下文，spinner 可能被裁剪或压底。
稳妥方案是让 spinner 脱离 modal-body 的层叠限制，直接挂到 modal-content 内部最上层：
- 给
.modal-content加position: relative - spinner 元素设为
position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; -
z-index设为1060（比 content 高，又不干扰后续可能打开的嵌套 modal） - 别用
fixed定位——滚动时会脱离 modal 边界
Spinner 动画卡顿或偏心？避免用 scale() 缩放，改用 em 控制尺寸
自己写的 CSS spinner 或强行对 .spinner-border 加 transform: scale(0.7)，容易导致旋转中心漂移、边缘模糊，尤其在高 DPI 屏幕下。根本原因是缩放破坏了像素对齐和 GPU 渲染管线。
Bootstrap 原生 spinner 使用 border + animation: spin，其动画流畅的前提是：宽高为偶数像素、边框为整数 px、transform-origin 精确落在中心。所以：
- 禁用
scale()，改用width: 1.5em; height: 1.5em;（适配btn-md尺寸）或1.2em（适配btn-sm） - 确保父容器 font-size 是整数（如
14px、16px），避免 em 计算出小数像素 - 加
will-change: transform到 spinner 元素，强制启用 GPU 加速 - 别删掉
role="status"和aria-hidden="true"，否则读屏器会重复播报“loading”
AJAX 失败后 spinner 残留？状态重置必须覆盖所有分支
90% 的 spinner 残留问题出在错误处理漏写。比如只写了 success 回调里替换内容，却没在 error 或 always 里清理 spinner —— 结果用户看到一个转个不停的圈，按钮不可点，也不报错。
必须保证无论请求成功、失败、超时、取消，都执行统一清理：
- 用
$.ajax().always(() => { $modal.find('.spinner-border').remove(); })最保险 - 如果用
fetch，记得catch()和finally()都要调用清理函数 - 禁用状态也要同步还原：
$modal.find('button[type="submit"]').prop('disabled', false) - 别依赖 DOM 节点自动销毁——手动
.remove()，避免内存泄漏
