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">打开模态框</button>
<!-- 链接 -->
<a data-toggle="modal" href="#myModal">打开模态框</a>
<!-- 其他元素 -->
<p data-toggle="modal" data-target="#myModal">打开模态框</p>
亲自试一试 »
通过 JavaScript 触发
使用以下方法手动启用
模态框选项
选项可以通过 data 属性或 JavaScript 传递。对于 data 属性，将选项名称追加到 data-，如 data-backdrop=""。
| 名称 | 类型 | 默认值 | 描述 | 试试 |
|---|---|---|---|---|
| backdrop | 布尔值或字符串 "static" | true | 指定模态框是否应具有深色遮罩
如果您指定值 "static"，则单击模态框外部时无法关闭模态框 |
使用 JS 使用 data |
| keyboard | 布尔值 | true | 指定模态框是否可以使用 Escape 键 (Esc) 关闭
|
使用 JS 使用 data |
| show | 布尔值 | true | 指定初始化时是否显示模态框 | 使用 JS 使用 data |
模态框方法
下表列出了所有可用的模态框方法。
| 方法 | 描述 | 试试 |
|---|---|---|
| .modal(options) | 将内容激活为模态框。有关有效值，请参见上面的选项 | 试试 |
| .modal("toggle") | 切换模态框 | 试试 |
| .modal("show") | 打开模态框 | 试试 |
| .modal("hide") | 隐藏模态框 | 试试 |
模态框事件
下表列出了所有可用的模态框事件。
| 事件 | 描述 | 试试 |
|---|---|---|
| show.bs.modal | 在模态框即将显示时发生 | 试试 |
| shown.bs.modal | 在模态框完全显示时发生（在 CSS 过渡完成之后） | 试试 |
| hide.bs.modal | 在模态框即将隐藏时发生 | 试试 |
| hidden.bs.modal | 在模态框完全隐藏时发生（在 CSS 过渡完成之后） | 试试 |
