Bootstrap JS 模态

模态 CSS 类

有关模态框的教程，请阅读我们的Bootstrap 模态教程。

Class	Description	Example
`.modal`	Creates a modal	尝试一下
`.modal-content`	Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer	尝试一下
`.modal-dialog-centered`	Centers the modal vertically and horizontally within the page	尝试一下
`.modal-dialog-scrollable`	Adds a scrollbar inside the modal	尝试一下
`.modal-header`	Defines the style for the header of the modal	尝试一下
`.modal-body`	Defines the style for the body of the modal	尝试一下
`.modal-footer`	Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, add the justify-content-start or justify-content-center together with the .modal-footer class	尝试一下
`.modal-sm`	Specifies a small modal	尝试一下
`.modal-lg`	Specifies a large modal	尝试一下
`.fade`	Adds an animation/transition effect which fades the modal in and out	尝试一下

通过 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()

亲自试一试 »

模态选项

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

Name	Type	Default	Description	尝试一下
backdrop	boolean or the string "static"	true	Specifies whether the modal should have a dark overlay: true - dark overlay false - no overlay (transparent) If you specify the value "static", it is not possible to close the modal when clicking outside of it	Using JS Using data
keyboard	boolean	true	Specifies whether the modal can be closed with the escape key (Esc): true - the modal can be closed with Esc false - the modal cannot be closed with Esc	Using JS Using data
show	boolean	true	Specifies whether to show the modal when initialized	Using JS Using data

Name

Type

Default

Description

尝试一下

backdrop

boolean or the string "static"

true

Specifies whether the modal should have a dark overlay:

true - dark overlay
false - no overlay (transparent)

If you specify the value "static", it is not possible to close the modal when clicking outside of it

Using JS Using data

keyboard

boolean

true

Specifies whether the modal can be closed with the escape key (Esc):

true - the modal can be closed with Esc
false - the modal cannot be closed with Esc

Using JS Using data

show

boolean

true

Specifies whether to show the modal when initialized

Using JS Using data

模态方法

下表列出了所有可用的模态方法。

Method	Description	尝试一下
.modal(options)	Activates the content as a modal. See options above for valid values	尝试一下
.modal("toggle")	Toggles the modal	尝试一下
.modal("show")	Opens the modal	尝试一下
.modal("hide")	Hides the modal	尝试一下

模态事件

下表列出了所有可用的模态事件。

Event	Description	尝试一下
show.bs.modal	Occurs when the modal is about to be shown	尝试一下
shown.bs.modal	Occurs when the modal is fully shown (after CSS transitions have completed)	尝试一下
hide.bs.modal	Occurs when the modal is about to be hidden	尝试一下
hidden.bs.modal	Occurs when the modal is fully hidden (after CSS transitions have completed)	尝试一下