使用data-bs-toggle实现全屏按钮需绑定data-bs-toggle="modal"和data-bs-target，模态框全屏由modal-dialog上的modal-fullscreen类控制（Bootstrap 5.2+），须避免加错位置；旧版本需手动设w-100 h-100及max-width:none；横屏适配需补充CSS强制100vw/100vh；注意Esc关闭、触控尺寸与焦点管理。
怎么用 data-bs-toggle 实现全屏按钮（Bootstrap 5）
bootstrap 5 原生不提供全屏模态框，但可以通过组合 data-bs-toggle 和自定义类快速实现——关键是把按钮行为和模态框尺寸控制解耦。
- 全屏按钮本身只是个普通按钮，只需绑定
data-bs-toggle="modal"和data-bs-target，和普通模态框完全一样 - 真正决定“是否全屏”的是模态框容器的 CSS 类，不是按钮属性；按钮只负责触发，不负责样式
- 推荐在
<div class="modal-dialog"> 上加 <code>modal-fullscreen类（Bootstrap 5.2+ 内置），这是最轻量、最兼容的方式示例按钮写法：
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullModal">全屏查看</button>
为什么 modal-fullscreen 类必须加在 modal-dialog 上
因为 Bootstrap 模态框的尺寸逻辑由
.modal-dialog的 CSS 控制，.modal只管遮罩层和定位上下文。加错位置会导致：全屏失效、内容被裁切、滚动异常。- ✅ 正确：
<div class="modal-dialog modal-fullscreen"> <li>❌ 错误：<code><div class="modal modal-fullscreen"> —— 这会让整个模态结构脱离 viewport 定位体系 <li>❌ 错误：<code><div class="modal-content modal-fullscreen"> —— 只撑大内容区，头部/底部被压扁或消失 <p>如果你用的是 Bootstrap 5.1 或更早版本，<code>modal-fullscreen不存在，得手动加class="w-100 h-100"并配合style="max-width: none;"。如何让全屏按钮适配移动端竖屏/横屏切换
原生
modal-fullscreen在横屏下会留白（因它默认按 viewport height 全高，但横屏时 viewport width > height）。要真正“贴边”，得补一句 CSS：@media (orientation: landscape) { .modal-fullscreen.modal-dialog { width: 100vw !important; height: 100vh !important; } }- 不加这句：横屏时左右有空白，尤其在 iOS Safari 下明显
- 加了之后需注意：如果模态框里有固定高度的 iframe 或 canvas，可能需要同步重设其尺寸
- 别用
width: 100%替代100vw，百分比会受父级 padding 影响，导致宽度不足
容易忽略的键盘与交互细节
全屏模态框一旦打开，用户习惯按
Esc关闭，但默认行为有时会失效——尤其当你用了data-bs-keyboard="false"或手动绑定了keydown事件。- 确认没意外禁用键盘：检查按钮或模态框上是否带
data-bs-keyboard="false" - 如果模态框内有
textarea或input，按Esc仍应关闭；若不生效，大概率是 JS 阻止了事件冒泡（比如在 input 的 keydown 里写了e.stopPropagation()） - 移动端点击遮罩层关闭时，如果按钮区域太小（比如只有图标无文字），iOS 上可能点不中——建议给全屏按钮加至少
min-width: 44px（苹果推荐最小触控尺寸）
最常被跳过的一步：全屏后焦点没进模态框，导致键盘操作失灵。手动加一句
$('#fullModal').on('shown.bs.modal', () => $('#fullModal .modal-body').focus())能解决大部分可访问性问题。
- ✅ 正确：
