Bootstrap 5 模态框教程 - 创建交互式对话框

什么是模态框？

模态框（Modal）是Bootstrap中用于创建对话框或弹出窗口的组件，常用于显示重要信息、收集用户输入或确认操作。

模态框组件可以包含：

标题区域
内容区域
操作按钮区域
关闭按钮
背景遮罩层

Bootstrap 5的模态框是完全响应式的，并且支持键盘导航和可访问性功能。

模态框演示

点击下方按钮查看模态框效果：

点击上方按钮查看模态框效果。

基本模态框

默认模态框

最基本的模态框，包含标题、内容和操作按钮：

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
  打开基本模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="basicModal" tabindex="-1" aria-labelledby="basicModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="basicModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>这是模态框的内容区域。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

不同尺寸的模态框

使用 .modal-sm, .modal-lg, .modal-xl 类创建不同尺寸的模态框：

<!-- 小尺寸模态框 -->
<div class="modal fade" id="smallModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <!-- 模态框内容 -->
  </div>
</div>

<!-- 大尺寸模态框 -->
<div class="modal fade" id="largeModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <!-- 模态框内容 -->
  </div>
</div>

<!-- 超大尺寸模态框 -->
<div class="modal fade" id="extraLargeModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <!-- 模态框内容 -->
  </div>
</div>

垂直居中的模态框

使用 .modal-dialog-centered 类创建垂直居中的模态框：

<div class="modal fade" id="centeredModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">垂直居中模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>这个模态框在屏幕上垂直居中显示。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

高级模态框功能

静态背景模态框

使用 data-bs-backdrop="static" 创建静态背景模态框，点击背景不会关闭：

<div class="modal fade" id="staticBackdropModal" data-bs-backdrop="static" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">静态背景模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>这个模态框有静态背景，点击背景不会关闭模态框。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

滚动长内容模态框

使用 .modal-dialog-scrollable 类创建可滚动内容的模态框：

<div class="modal fade" id="scrollableModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">可滚动模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>当内容很长时，模态框内部可以滚动。</p>
        <!-- 长内容 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

表单模态框

在模态框中嵌入表单：

<div class="modal fade" id="formModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">用户注册</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="name" class="form-label">姓名</label>
            <input type="text" class="form-control" id="name">
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="email">
          </div>
          <!-- 更多表单字段 -->
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div>
  </div>
</div>

自定义模态框

自定义样式模态框

使用自定义CSS样式创建独特的模态框：

<div class="modal fade custom-modal" id="customModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-star-fill me-2"></i>自定义标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>这是一个自定义样式的模态框。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>

<style>
.custom-modal .modal-header {
  background-color: #6f42c1;
  color: white;
}
.custom-modal .modal-footer {
  background-color: #f8f9fa;
}
</style>

全屏模态框

使用 .modal-fullscreen 类创建全屏模态框：

<!-- 全屏模态框 -->
<div class="modal fade" id="fullscreenModal" tabindex="-1">
  <div class="modal-dialog modal-fullscreen">
    <!-- 模态框内容 -->
  </div>
</div>

<!-- 小屏全屏模态框 -->
<div class="modal fade" id="fullscreenSmModal" tabindex="-1">
  <div class="modal-dialog modal-fullscreen-sm-down">
    <!-- 模态框内容 -->
  </div>
</div>

<!-- 大屏全屏模态框 -->
<div class="modal fade" id="fullscreenLgModal" tabindex="-1">
  <div class="modal-dialog modal-fullscreen-lg-down">
    <!-- 模态框内容 -->
  </div>
</div>

JavaScript控制

手动控制模态框

除了使用data属性，您还可以通过JavaScript控制模态框组件：

// 获取模态框实例
var myModal = new bootstrap.Modal(document.getElementById('myModal'))

// 显示模态框
document.getElementById('showModalBtn').addEventListener('click', function () {
  myModal.show()
})

// 隐藏模态框
document.getElementById('hideModalBtn').addEventListener('click', function () {
  myModal.hide()
})

// 切换模态框
document.getElementById('toggleModalBtn').addEventListener('click', function () {
  myModal.toggle()
})

事件处理

模态框组件提供了事件监听功能，可以在模态框状态变化时执行代码：

var myModal = document.getElementById('eventModal')

myModal.addEventListener('show.bs.modal', function () {
  console.log('模态框开始显示')
})

myModal.addEventListener('shown.bs.modal', function () {
  console.log('模态框完全显示')
})

myModal.addEventListener('hide.bs.modal', function () {
  console.log('模态框开始隐藏')
})

myModal.addEventListener('hidden.bs.modal', function () {
  console.log('模态框完全隐藏')
})

模态框设计最佳实践

用户体验

使用清晰的标题和操作按钮
确保模态框内容简洁明了
提供明确的关闭方式
考虑使用静态背景防止意外关闭

内容组织

对于长内容使用可滚动模态框
合理使用不同尺寸的模态框
在表单模态框中提供清晰的标签
考虑使用全屏模态框展示复杂内容

可访问性

为模态框添加适当的ARIA属性
确保键盘导航正常工作
为屏幕阅读器提供清晰的模态框结构
使用高对比度颜色确保可读性

性能优化

避免在模态框中加载过多大型资源
考虑使用懒加载技术
优化移动设备上的模态框体验
测试模态框在各种设备上的加载性能

掌握模态框组件后，下一步学习其他Bootstrap组件

Bootstrap 5提供了丰富的组件库，包括轮播、卡片、表单、导航等。

学习轮播组件查看所有组件

Bootstrap5教程

Bootstrap5 模态框

Bootstrap 5 模态框