bootstrap modal 必须配合 js 才能实现完整交互功能，仅 html+css 无法自动弹出、加遮罩或管理焦点；最小结构需包含 modal 容器、dialog、content 三部分并设唯一 id；常用问题包括未引入 bootstrap.bundle.js、触发按钮属性缺失或 id 错误；自定义样式推荐使用 css 变量以兼容 js 行为。
用 HTML 结合 Bootstrap 实现 modal 弹窗，核心是“结构正确 + 属性匹配 + 资源加载到位”，不需要写 JavaScript 就能完成点击显示、点击关闭的基础交互。
确保 Bootstrap 资源正确引入
必须同时加载 Bootstrap 的 CSS 和 JS（含 Popper 依赖），推荐使用 CDN：
- 在 中引入 CSS：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> - 在 底部 引入 JS（含 Popper）：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> - 不要只引 CSS 不引 JS——否则按钮点不动；也不要只引 bootstrap.min.js（不带 bundle），会缺少 Popper 导致定位异常
按钮与弹窗的 HTML 结构要严格对应
触发按钮和 modal 容器之间靠 data-bs-target 或 href 关联，且 modal 必须包含三层嵌套：
- 按钮写法示例：
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myVideoModal">播放视频</button> - modal 容器必须按顺序包含：
→<div class="modal fade" id="myVideoModal"> <br>→ <code><div class="modal-dialog"> <br>→ <code><div class="modal-content"> <br>缺任何一层都会导致样式错位或功能失效 <li>modal 内部建议保留 <strong>header</strong>（含标题和关闭按钮）、<strong>body</strong>（放内容，如 <video> 或文本）、<strong>footer</strong>（可选操作按钮）</video> </li> <h3>视频类弹窗需注意响应式与自动播放控制</h3> <p>如果弹窗里放的是 <video>，直接嵌入 <strong>modal-body</strong> 即可，但要注意两点：</video></p> <ul> <li>给 <video> 加 <code>class="w-100"保证宽度自适应，高度由 aspect-ratio 或 max-height 控制 - 避免加
autoplay—— 多数浏览器会拦截无声自动播放；如需默认播放，可加muted autoplay，并确保有用户手势触发（比如点击按钮本身已满足） - 示例片段：
<div class="modal-body"><video class="w-100" controls muted><source src="demo.mp4" type="video/mp4"></source></video></div>
常用定制选项可直接用 data 属性开启
无需写 JS，通过添加 data 属性就能调整行为：
- 点击遮罩层不关闭：加
data-bs-backdrop="static"到 modal 标签上 - 禁用 Esc 键关闭：加
data-bs-keyboard="false" - 设置大/小尺寸：在
modal-dialog上加modal-lg或modal-sm - 关闭后重置视频（防止继续播放）：可在
hidden.bs.modal事件中手动 pause，但这需要少量 JS；纯 HTML 场景下建议用户关闭时手动暂停
