Modal模态框

~~Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.~~使用Bootstrap的JavaScript模态框插件向站点添加对话框，以显示灯箱、用户通知或完全自定义的内容。

~~On this page~~本页内容

How it works工作原理

~~Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.~~在开始使用Bootstrap的模态框组件之前，请务必阅读以下内容，因为我们的菜单选项最近发生了更改。

~~Modals are built with HTML, CSS, and JavaScript.~~ Modals是用HTML、CSS和JavaScript构建的。~~They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.~~它们位于文档中的所有其他内容之上，并从<body>上删除滚动，这样就会改用模态框内容滚动。
~~Clicking on the modal “backdrop” will automatically close the modal.~~点击模态框“背幕”将自动关闭模态框。
~~Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.~~Bootstrap一次只支持一个模态框窗口。嵌套模态框不受支持，因为我们认为它们是糟糕的用户体验。
~~Modals use position: fixed, which can sometimes be a bit particular about its rendering.~~ Modals使用position: fixed，这在渲染时可能有点特殊。~~Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.~~ 只要有可能，将模态框HTML放在顶层位置，以避免来自其他元素的潜在干扰。~~You’ll likely run into issues when nesting a .modal within another fixed element.~~在另一个固定元素中嵌套.modal时，可能会遇到问题。
~~Once again, due to position: fixed, there are some caveats with using modals on mobile devices.~~ 再一次，由于position: fixed，在移动设备上使用模态框有一些注意事项。~~See our browser support docs for details.~~有关详细信息，请参阅我们的浏览器支持文档。
~~Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals.~~ 由于HTML5定义其语义的方式，autofocusHTML属性在Bootstrap模态框中不起作用。~~To achieve the same effect, use some custom JavaScript:~~要实现相同的效果，请使用一些自定义JavaScript：

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

~~The animation effect of this component is dependent on the prefers-reduced-motion media query.~~ 此组件的动画效果取决于prefers-reduced-motion媒体查询。~~See the reduced motion section of our accessibility documentation.~~请参阅我们的易访问性文档中的简化运动部分。

~~Keep reading for demos and usage guidelines.~~继续阅读演示和使用指南。

Examples例子

~~Below is a static modal example (meaning its position and display have been overridden).~~ 下面是一个静态模态框示例（表示其position和display已被覆盖）。~~Included are the modal header, modal body (required for padding), and modal footer (optional).~~ 包括模态框头部、模态框主体（padding所需）和模态框脚部（可选）。~~We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.~~我们要求您尽可能将模态框头包含在撤除操作中，或者提供另一个明确的撤除操作。

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Live demo现场演示

~~Toggle a working modal demo by clicking the button below.~~ 通过单击下面的按钮切换工作模态框演示。~~It will slide down and fade in from the top of the page.~~它将从页面顶部向下滑动并淡入。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Static backdrop静态背幕

~~When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.~~当背幕设置为静态时，在其外部单击时，模态框将不会关闭。单击下面的按钮进行尝试。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>

Scrolling long content滚动长内容

~~When modals become too long for the user’s viewport or device, they scroll independent of the page itself.~~ 当模态框对于用户的视口或设备来说太长时，它们会独立于页面本身滚动。~~Try the demo below to see what we mean.~~试试下面的演示，看看我们的意思。

~~You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.~~您还可以创建一个可滚动的模态框，通过将.modal-dialog-scrollablee添加到.modal-dialog，可以滚动模态框主体。

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>

Vertically centered垂直居中

~~Add .modal-dialog-centered to .modal-dialog to vertically center the modal.~~将.modal-dialog-centered添加到.modal-dialog以垂直居中模态框。

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>

Tooltips and popovers工具提示和弹出框

~~Tooltips and popovers can be placed within modals as needed.~~ 工具提示和弹出框可以根据需要放置在模态框中。~~When modals are closed, any tooltips and popovers within are also automatically dismissed.~~当模态框关闭时，其中的任何工具提示和弹出窗口也会自动关闭。

<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Using the grid使用网格

~~Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body.~~ 通过在.modal-body中嵌套.container-fluid，可以在模态框中使用Bootstrap网格系统。~~Then, use the normal grid system classes as you would anywhere else.~~然后，像在其他任何地方一样使用普通网格系统类。

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>

~~Have a bunch of buttons that all trigger the same modal with slightly different contents?~~ 有一堆按钮都触发相同的模态框，但内容略有不同吗？~~Use event.relatedTarget and HTML data-bs-* attributes to vary the contents of the modal depending on which button was clicked.~~根据单击的按钮，使用event.relatedTarget和HTMLdata-bs-*属性更改模态框的内容。

~~Below is a live demo followed by example HTML and JavaScript.~~ 下面是一个实时演示，后面是示例HTML和JavaScript。~~For more information, read the modal events docs for details on relatedTarget.~~有关更多信息，请阅读模态框事件文档以了解relatedTarget的详细信息。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
  var button = event.relatedTarget
// Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})

Toggle between modals在情态动词之间切换

~~Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.~~ 巧妙地放置data-bs-target属性和data-bs-toggle属性，可以在多个模态框之间切换。~~For example, you could toggle a password reset modal from within an already open sign in modal.~~ 例如，您可以在已打开的登录模态框中切换密码重置模态框。Please note multiple modals cannot be open at the same time—this method simply toggles between two separate modals.请注意，不能同时打开多个模态框——此方法只是在两个单独的模态框之间切换。

Open first modal

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Change animation更改动画

The $modal-fade-transform variable determines the transform state of .modal-dialog before the modal fade-in animation, the $modal-show-transform variable determines the transform of .modal-dialog at the end of the modal fade-in animation.$modal-fade-transform变量确定.modal-dialog在模态框淡入动画结束之前的变换状态，$modal-show-transform变量确定.modal-dialog在模态框淡入动画结束时的变换状态。

~~If you want for example a zoom-in animation, you can set $modal-fade-transform: scale(.8).~~例如，如果要放大动画，可以设置$modal-fade-transform: scale(.8)。

Remove animation删除动画

~~For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.~~对于只是显示而不是淡入视图的模态框，请从模态框标记中删除.fade类。

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>

Dynamic heights动态高度

~~If the height of a modal changes while it is open, you should call myModal.handleUpdate() to readjust the modal’s position in case a scrollbar appears.~~如果模态框打开时其高度发生变化，则应调用myModal.handleUpdate()以在出现滚动条时重新调整模态框的位置。

Accessibility可访问性

~~Be sure to add aria-labelledby="...", referencing the modal title, to .modal.~~ 请确保给.modal添加aria-labelledby="..."，引用模态框标题。~~Additionally, you may give a description of your modal dialog with aria-describedby on .modal.~~ 此外，您还可以使用.modal上的aria-describedby来描述模态框对话框。~~Note that you don’t need to add role="dialog" since we already add it via JavaScript.~~请注意，你不需要添加role="dialog"，因为我们已经通过JavaScript添加了它。

Embedding YouTube videos嵌入YouTube视频

~~Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more.~~ 在modals中嵌入YouTube视频需要额外的JavaScript（不在Bootstrap中）来自动停止播放等等。~~See this helpful Stack Overflow post for more information.~~有关更多信息，请参阅这篇有用的堆栈溢出文章。

Optional sizes可选尺寸

~~Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog.~~ 模态框有三种可选大小，可通过放置在.modal-dialog上的修饰符类获得。~~These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.~~这些大小在某些断点处起作用，以避免在较窄的视口上出现水平滚动条。

~~Size~~尺寸/ins>	~~Class~~类	~~Modal max-width~~模态框最大宽度
~~Small~~小的	`.modal-sm`	`300px`
~~Default~~违约	None	`500px`
~~Large~~大的	`.modal-lg`	`800px`
~~Extra large~~特大型	`.modal-xl`	`1140px`

~~Our default modal without modifier class constitutes the “medium” size modal.~~没有修饰符类的默认模态框构成“中等”大小的模态框。

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

~~Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.~~另一个替代是弹出覆盖用户视口的模态框的选项，可通过放置在.modal-dialog上的修饰符类来实现它。

Class	Availability
`.modal-fullscreen`	Always
`.modal-fullscreen-sm-down`	Below `576px`
`.modal-fullscreen-md-down`	Below `768px`
`.modal-fullscreen-lg-down`	Below `992px`
`.modal-fullscreen-xl-down`	Below `1200px`
`.modal-fullscreen-xxl-down`	Below `1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>

Sass

Variables变量

$modal-inner-padding:               $spacer;
$modal-footer-margin-between:       .5rem;
$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;
$modal-title-line-height:           $line-height-base;
$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;
$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;
$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop循环

~~Responsive fullscreen modals are generated via the $breakpoints map and a loop in scss/_modal.scss.~~通过$breakpoints映射和scss/_modal.scss中的循环生成响应性全屏模态框。

@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}

Usage用法

~~The modal plugin toggles your hidden content on demand, via data attributes or JavaScript.~~ 模态框插件通过data属性或JavaScript按需切换隐藏内容。~~It also overrides default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.~~它还覆盖默认的滚动行为，并生成一个.modal-backdrop，以提供一个单击区域，用于在模态框外单击时取消显示的模态框。

Via data attributes通过data属性

Toggle切换

~~Activate a modal without writing JavaScript.~~ 在不编写JavaScript的情况下激活模态框。~~Set data-bs-toggle="modal" on a controller element, like a button, along with a data-bs-target="#foo" or href="#foo" to target a specific modal to toggle.~~在某个控制器元素（譬如某个按钮）上设置data-bs-toggle="modal"，并配用data-bs-target="#foo"或href="#foo"，从而瞄准一个特定的模态框以切换。

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Dismiss撤除

~~Dismissal can be achieved with the data attribute on a button within the modal as demonstrated below:~~可通过模态框内按钮上的data属性实现撤除，如下所示：

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

~~or on a button outside the modal using the data-bs-target as demonstrated below:~~或者在模态框外按钮上使用data-bs-target，演示如下：

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

~~While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the WAI-ARIA modal dialog design pattern.~~ 虽然支持两种撤除模态框的方法，但请记住，从模态框外部撤除与WAI-ARIA模态框对话框设计模式不匹配。~~Do this at your own risk.~~这样做的风险由你自己承担。

Via JavaScript通过JavaScript

~~Create a modal with a single line of JavaScript:~~使用一行JavaScript创建一个模态框：

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Options选项

~~Options can be passed via data attributes or JavaScript.~~ 选项可以通过data属性或JavaScript传递。~~For data attributes, append the option name to data-bs-, as in data-bs-backdrop="".~~对于data属性，请将选项名称追加到data-bs-后面，譬如使用data-bs-backdrop=""。

~~Name~~名称	~~Type~~类型	~~Default~~默认	~~Description~~描述
`backdrop`	~~boolean or the string~~ 布尔值或字符串`'static'`	`true`	~~Includes a modal-backdrop element.~~ 包括模态框背幕元素。~~Alternatively, specify `static` for a backdrop which doesn't close the modal on click.~~或者，指定`static` 以实现不在单击背幕时关闭模态框。
`keyboard`	boolean	`true`	~~Closes the modal when escape key is pressed~~按下退出键时关闭模态框
`focus`	boolean	`true`	~~Puts the focus on the modal when initialized.~~初始化时将焦点放在模态框上。

Methods方法

Asynchronous methods and transitions异步方法和转换

~~All API methods are asynchronous and start a transition.~~ 所有API方法都是异步的，并开始转换。~~They return to the caller as soon as the transition is started but before it ends.~~ 转换一开始，但在转换结束之前，它们就返回给调用方。~~In addition, a method call on a transitioning component will be ignored.~~此外，对转换组件的方法调用将被忽略。

~~See our JavaScript documentation for more information.~~有关更多信息，请参阅我们的JavaScript文档。

Passing options传入选项

~~Activates your content as a modal.~~ 将内容作为模态框激活。~~Accepts an optional options object.~~接受可选的选项object。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})

toggle切换

~~Manually toggles a modal.~~ 手动切换模态框。~~Returns to the caller before the modal has actually been shown or hidden~~在实际显示或隐藏模态框之前返回调用方 ~~(i.e. before the shown.bs.modal or hidden.bs.modal event occurs).~~（即，在shown.bs.modal事件或hidden.bs.modal事件发生之前）。

myModal.toggle()

show显示

~~Manually opens a modal.~~ 手动打开一个模态框。~~Returns to the caller before the modal has actually been shown~~在实际显示模态框之前返回调用方 ~~(i.e. before the shown.bs.modal event occurs).~~（即，在shown.bs.modal事件发生之前）。

myModal.show()

~~Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property).~~此外，还可以将DOM元素作为参数传递，该参数可以在模态框事件中接收（作为relatedTarget属性）。

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

hide隐藏

~~Manually hides a modal.~~ 手动隐藏模态框。~~Returns to the caller before the modal has actually been hidden~~在模态框实际隐藏之前返回调用方 ~~(i.e. before the hidden.bs.modal event occurs).~~（即，在hidden.bs.modal事件发生之前）。

myModal.hide()

handleUpdate

~~Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).~~如果模态框打开时高度发生变化（即出现滚动条），手动重新调整模态框位置。

myModal.handleUpdate()

dispose撤除

~~Destroys an element’s modal.~~ 破坏元素的模态框。~~(Removes stored data on the DOM element)~~（删除DOM元素上存储的数据）

myModal.dispose()

getInstance

Static method which allows you to get the modal instance associated with a DOM element静态方法，该方法允许您获取与DOM元素关联的模态框实例

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialised静态方法，它允许您获取与DOM元素关联的模态框实例，或者在未初始化的情况下创建一个新实例

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

Events事件

~~Bootstrap’s modal class exposes a few events for hooking into modal functionality.~~ Bootstrap的模态框类公开了一些事件，用于连接到模态框功能。~~All modal events are fired at the modal itself (i.e. at the <div class="modal">).~~所有模态框事件都会在模态框本身（即在<div class="modal">）上引发。

~~Event type~~事件类型	~~Description~~描述
`show.bs.modal`	~~This event fires immediately when the `show` instance method is called.~~ 调用`show`实例方法时，此事件立即激发。~~If caused by a click, the clicked element is available as the `relatedTarget` property of the event.~~如果是由单击引起的，则单击的元素可用作事件的`relatedTarget`属性。
`shown.bs.modal`	~~This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).~~ 此事件在模态框对用户可见时触发（将等待CSS转换完成）。~~If caused by a click, the clicked element is available as the `relatedTarget` property of the event.~~如果是由单击引起的，则单击的元素可用作事件的`relatedTarget`属性。
`hide.bs.modal`	~~This event is fired immediately when the `hide` instance method has been called.~~调用`hide`实例方法后，将立即触发此事件。
`hidden.bs.modal`	~~This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).~~当模态框对用户完成隐藏时（将等待CSS转换完成），将触发此事件。
`hidePrevented.bs.modal`	~~This event is fired when the modal is shown, its backdrop is `static` and a click outside the modal or an escape key press is performed with the keyboard option or `data-bs-keyboard` set to `false`.~~当显示模态框、背幕为`static`且在键盘选项或`data-bs-keyboard`设置为`false`的情况下在模态框外单击或按`escape`键时，将触发此事件。

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})