Bootstrap JS Modal
Modal CSS 类
关于 Modal 的教程，请阅读我们的 Bootstrap Modal 教程。
| 类 | 描述 | 示例 |
|---|---|---|
.modal |
创建一个 modal | 试一试 |
.modal-content |
使用边框、背景色等正确样式化 modal。使用此 class 为 modal 添加标题、主体和页脚。 | 试一试 |
.modal-dialog-centered |
将 modal 在页面中垂直和水平居中 | 试一试 |
.modal-dialog-scrollable |
在 modal 中添加滚动条 | 试一试 |
.modal-header |
定义 modal 标题的样式 | 试一试 |
.modal-body |
定义 modal 主体的样式 | 试一试 |
.modal-footer |
定义 modal 页脚的样式。注意： 此区域默认右对齐。要更改此设置，请将 justify-content-start 或 justify-content-center 与 .modal-footer class 一起添加。 | 试一试 |
.modal-sm |
指定一个小的 modal | 试一试 |
.modal-lg |
指定一个大的 modal | 试一试 |
.fade |
添加淡入淡出 modal 的动画/过渡效果 | 试一试 |
通过 data-* 属性触发 Modal
将 data-toggle="modal" 和 data-target="#modalID" 添加到任何元素。
注意： 对于 <a> 元素，省略 data-target，而是使用 href="#modalID"。
示例
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">打开 Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">打开 Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">打开 Modal</p>
自己动手试一试 »
通过 JavaScript 触发
使用以下命令手动启用：
Modal 选项
可以通过 data 属性或 JavaScript 传递选项。对于 data 属性，将选项名称附加到 data-，例如 data-backdrop="".
| 名称 | 类型 | 默认值 | 描述 | 试一试 |
|---|---|---|---|---|
| backdrop | boolean 或字符串 "static" | true | 指定 modal 是否应具有深色叠加层
如果指定值为 "static"，则无法通过点击 modal 外部来关闭它。 |
使用 JS 使用 data |
| 键盘 | boolean | true | 指定 modal 是否可以使用 escape 键（Esc）关闭
|
使用 JS 使用 data |
| show | boolean | true | 指定初始化时是否显示 modal | 使用 JS 使用 data |
Modal 方法
下表列出了所有可用的 modal 方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .modal(options) | 将内容激活为一个 modal。有关有效值，请参阅上面的选项。 | 试一试 |
| .modal("toggle") | 切换 modal | 试一试 |
| .modal("show") | 打开 modal | 试一试 |
| .modal("hide") | 隐藏 modal | 试一试 |
Modal 事件
下表列出了所有可用的 modal 事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| show.bs.modal | 在 modal 即将显示时触发 | 试一试 |
| shown.bs.modal | 在 modal 完全显示时触发（在 CSS 过渡完成后） | 试一试 |
| hide.bs.modal | 在 modal 即将隐藏时触发 | 试一试 |
| hidden.bs.modal | 在 modal 完全隐藏时触发（在 CSS 过渡完成后） | 试一试 |
