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模态框的使用技巧,并在实际项目中运用到您的实践中。