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()，避免内存泄漏

真正难的不是加 spinner，是让它在各种边界条件下（快速连续点击、网络中断、modal 重用、键盘焦点切换）都保持视觉与逻辑一致。这些细节不写进 JS 控制流，光靠 CSS 是撑不住的。