Bootstrap5 模态框

Bootstrap5 模态框使用指南

概述

模态框（Modal）作为页面弹出层的一种，可以给用户以提示、询问和操作等信息。Bootstrap5对模态框进行了大幅升级，增加了更多的可定制化配置和新的交互功能。

本文介绍如何使用Bootstrap5模态框，并详细说明常用的配置和API。

基本使用

HTML结构

实现模态框功能需要在HTML中定义触发模态框的按钮和模态框的基本结构：

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Launch demo modal
</button>

<!-- 模态框基本结构 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <!-- 模态框主体内容 -->
      <div class="modal-body">
        Modal body text goes here.
      </div>
      
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      
    </div>
  </div>
</div>

JavaScript调用

为了触发模态框，需要在JavaScript中进行配置和调用：

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

// 显示模态框
myModal.show()

// 隐藏模态框
myModal.hide()

在上述Javascript中，需要传入两个参数，第一个参数是模态框的ID，第二个参数是可选的配置对象。在配置对象中，可以通过配置项自定义模态框的设置，如加入键盘功能、背景透明等。

如果仅仅是简单的使用，可以使用内置的 data-bs-* 属性配置模态框的行为和样式：

<div class="modal fade" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Launch demo modal
</button>

高级用法

通过JavaScript方式创建模态框

除了基本使用方法中提到的在HTML中定义模态框的结构和JavaScript中调用方式，Bootstrap5还支持通过JavaScript的方式动态地创建模态框。

var myModal = new bootstrap.Modal(document.createElement('div'), {
  keyboard: false
})

myModal.setTitle('Modal title')
myModal.setContent('Modal content')
myModal.show()

在使用JavaScript方式创建模态框时，需要先创建一个div节点作为模态框的容器，再使用 new bootstrap.Modal 的方法把容器节点转化成模态框。

之后通过调用相关 API 往模态框中添加元素，如 setTitle 和 setContent，最后使用show方法展示模态框。

模态框大小

Bootstrap5的模态框可以根据需要设置3种不同的大小，分别是：

小 (modal-sm)
中 (modal-md)
大 (modal-lg)

可以在 modal-dialog 元素中通过添加对应的类名来控制模态框的大小。

<div class="modal-dialog modal-md">
  <!-- ... -->
</div>

配置选项

Bootstrap5的模态框提供了丰富的配置选项，这些选项都可以通过在调用模态框时传入配置对象进行设置。常用的配置选项包括：

backdrop：背景遮罩层，包括：static（false），true（默认）和 false 。

false：设置 modal-dialog 不会响应鼠标点击事件，因此不会关闭模态框；

true：会响应鼠标点击事件，并自动关闭模态框；

static：点击背景遮罩区域不会关闭模态框，惟有在窗口右上角的关闭按钮上点击才能关闭模态框；
keyboard：键盘触发事件，包括：true（默认）和 false。

true：当按下 esc 按键时自动关闭模态框；

false：禁用 esc 键关闭模态框。
focus：加载时是否自动将焦点设置到模态框中的第一个可交互的元素上，包括：true（默认）和 false。如果在模态框中会有输入框等可交互元素，建议设置为 true。
show：是否在创建模态框时直接展示，包括：true和 false（默认）。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  backdrop: 'static',
  keyboard: false,
  focus: true,
  show: true
})

事件

Bootstrap5的模态框提供了多种事件，可以在必要时对相关操作进行处理。常用的事件包括：

show.bs.modal：在模态框打开之前触发的事件。
shown.bs.modal：在模态框打开之后触发的事件。
hide.bs.modal：在模态框关闭之前触发的事件。
hidden.bs.modal：在模态框关闭之后触发的事件。
resize.bs.modal：在改变模态框大小时触发的事件。
keydown.bs.modal：在按下键盘时触发的事件。

这些事件可以通过在配置对象中添加回调函数的方式进行处理：

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  focus: true,
  keyboard: true
})

myModal.show()

myModal.addEventListener('hide.bs.modal', function (event) {
    // 处理modal隐藏事件
})

总结

本文介绍了Bootstrap5模态框的基本用法和一些高级配置选项，以及常用的事件处理方法。通过学习本文，您可以轻松掌握Bootstrap5模态框的使用技巧，并在实际项目中运用到您的实践中。

Bootstrap5 文字排版 Bootstrap5 滚动监听(Scrollspy)