Bootstrap JS 模态框
模态 CSS 类
有关模态的教程，请阅读我们的 Bootstrap 模态教程。
| 类 | 描述 | 例子 |
|---|---|---|
.modal |
创建模态 | 测试一下 |
.modal-content |
使用边框、背景颜色等正确设置模态框的样式。使用此类添加模态框的页眉、正文和页脚 | 测试一下 |
.modal-dialog-centered |
在页面内垂直和水平居中模态 | 测试一下 |
.modal-dialog-scrollable |
在模态框内添加滚动条 | 测试一下 |
.modal-header |
定义模态标题的样式 | 测试一下 |
.modal-body |
定义模态体的样式 | 测试一下 |
.modal-footer |
定义模态中页脚的样式。 注释: 默认情况下，此区域右对齐。 要更改这一点，请将 justify-content-start 或 justify-content-center 与 .modal-footer 类一起添加 | 测试一下 |
.modal-sm |
指定一个小模态 | 测试一下 |
.modal-lg |
指定大模态 | 测试一下 |
.fade |
添加使模态淡入淡出的动画/过渡效果 | 测试一下 |
通过 data-* 属性触发模态
将 data-toggle="modal" 和 data-target="#modalID" 添加到任何元素。
注释: 对于 <a> 元素，省略 data-target 并使用 href="#modalID" 代替:
实例
<!-- 按钮 -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 链接 -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
<!-- 其他元素 -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
亲自试一试 »
通过 JavaScript 触发
手动启用:
Modal 模态选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-backdrop=""。
| 名称 | 类型 | 默认值 | 描述 | 试一试 |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | 指定模态是否应该有一个深色覆盖:
如果您指定值 "static"，则在其外部单击时无法关闭模态 |
Using JS Using data |
| keyboard | boolean | true | 指定是否可以使用转义键 (Esc) 关闭模态:
|
Using JS Using data |
| show | boolean | true | 指定初始化时是否显示模态框 | Using JS Using data |
Modal 模态方法
下表列出了所有可用的模态方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .modal(options) | 将内容激活为模态。请参阅上面的选项以获取有效值 | 测试一下 |
| .modal("toggle") | 切换模态 | 测试一下 |
| .modal("show") | 打开模态 | 测试一下 |
| .modal("hide") | 隐藏模态 | 测试一下 |
Modal 模态事件
下表列出了所有可用的模态事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| show.bs.modal | 当模态即将显示时发生 | 测试一下 |
| shown.bs.modal | 在模态完全显示时发生（在 CSS 转换完成后） | 测试一下 |
| hide.bs.modal | 模态框即将隐藏时发生 | 测试一下 |
| hidden.bs.modal | 在模态完全隐藏时发生（在 CSS 转换完成后） | 测试一下 |
