必须显式设置 closeButton={false} 在 Modal.Header 上，否则自定义按钮会与原生 .close 重叠并触发双关闭；仅 CSS 隐藏无效，因点击区域和 aria-label 仍存在。
Modal.Header 的 closeButton 属性必须显式设为 false
不关掉默认按钮，你后续加的自定义按钮会和原生 .close 图标重叠，甚至触发两次 onHide。只用 CSS 隐藏（比如 display: none）不行——点击区域还在，aria-label="Close" 语义也残留，无障碍测试直接报错。
关键点：
-
closeButton={false}必须写在<modal.header></modal.header>标签上，写在<modal></modal>或<modal.body></modal.body>上无效 - 不能省略花括号：错误写法是
closeButton="false"（字符串），正确是closeButton={false}（布尔值） - 禁用后，原生按钮 DOM 节点彻底不渲染，避免样式干扰和事件冲突
自定义关闭按钮要放在 Modal.Header 内并用 button 包裹
禁用默认按钮后，你得手动加一个可交互元素，位置、语义、行为都得自己补全。推荐用 <button></button> 而不是 <div> 或 <code><span></span> —— 后者不支持键盘聚焦，按空格/回车不会触发关闭。
实操要点：
- 必须加
type="button"，否则在表单内点击可能意外触发表单提交 - 必须传
aria-label="Close"，否则屏幕阅读器读不出意图，政务/医疗类项目上线会被卡住 - 推荐用
position-absolute top-0 end-0定位（Bootstrap 5.3+ 工具类），比手动写right: 1rem; top: 1rem;更可靠，适配 RTL 语言也更稳 - 图标建议用 Font Awesome 的
faXmark或 Unicode×，别用纯 SVG 写死——维护成本高，且容易漏掉 focus 状态样式
为什么 .btn-close 在 Modal 里不生效？它根本不是给 Modal 准备的
.btn-close 是 Bootstrap 5 专为 toast 和 alert 设计的关闭触发器，它依赖 data-bs-dismiss="toast" 或 data-bs-dismiss="alert" 才能自动绑定 JS 行为。Modal 不认这个属性，也不会监听 .btn-close 的点击。
常见误用现象：
- 在
<modal.header></modal.header>里塞一个<button class="btn-close" data-bs-dismiss="modal"></button>→ 点击无反应，因为 Modal 组件没初始化对应 dismiss 监听 - 试图给
.btn-close加onClick→ TypeScript 报错，它不是 React 组件，没有 onClick 属性 - 直接覆盖
.btn-close::before改 content → 无效，Modal 默认压根不渲染.btn-close类按钮
结论：Modal 的关闭逻辑完全由 onHide 控制，按钮只是个触发载体，别套用 toast/alert 的那一套。
定位偏移容易被忽略：end-0 不等于 right: 0
用 Bootstrap 工具类 end-0 定位时，如果父容器 <modal.header></modal.header> 没设 position: relative，绝对定位会相对于 body 或最近的定位祖先，导致按钮飘到屏幕右上角。
解决方式很简单：
- 给
<modal.header></modal.header>加className="position-relative" - 自定义按钮加
className="position-absolute top-0 end-0 translate-middle"（translate-middle让图标中心对齐角点，比靠边距微调更鲁棒） - 如果用了 Font Awesome，记得加
className="fa-fw"保证图标宽度一致，避免不同图标导致按钮左右晃动
这个 position-relative 很容易漏，尤其当 Modal.Header 外层还包了自定义 wrapper 时，父级定位上下文一变，按钮就失联了。
