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 触发

手动启用:

实例

$("#myModal").modal()
亲自试一试 »

Modal 模态选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 data-,如 data-backdrop=""。

名称 类型 默认值 描述 试一试
backdrop boolean or the string "static" true 指定模态是否应该有一个深色覆盖:

  • true - 深色叠加
  • false - 没有覆盖(透明)

如果您指定值 "static",则在其外部单击时无法关闭模态

Using JS Using data
keyboard boolean true 指定是否可以使用转义键 (Esc) 关闭模态:

  • true - 模态可以用 Esc 关闭
  • false - 无法使用 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 转换完成后) 测试一下