模态弹框（Modal）

使用Bootstrap的JavaScript模式插件将对话框添加到站点中，用于灯箱、用户通知或完全自定义的内容。

On this page

工作原理

在开始使用Bootstrap互动视窗之前，请务必阅读以下内容，因为菜单项目在近期内有修改。

  • 互动视窗是用HTML、CSS和JavaScript构建的。它们位于文件中任何其他内容之上，并从body中删除滚动，以便互动视窗的内容滚动。
  • 点击互动视窗“backdrop”将自动关闭互动视窗。
  • Bootstrap一次只支持一个互动视窗。不支持巢状互动视窗，因为我们认为巢状互动视窗用户体验不佳。
  • 互动视窗使用position: fixed，在渲染呈现上会有点特别。尽可能将您的互动视窗HTML放置在顶级位置，以避免其他元素的潜在干扰。在另一个固定元素中内加入一个.modal的时候，你可能会遇到问题。
  • 由于position: fixed，在移动设备上使用互动视窗有一些附加说明。有关详细信息，请参阅我们的浏览器支持。
  • 依据HTML5定义语义的方式，autofocus HTML属性对Bootstrap互动视窗没有影响。要达到同样的效果，请使用一些自定义JavaScript：the autofocus HTML attribute 
var myModal = document.getElementById('myModal')
        var myInput = document.getElementById('myInput')
        
        myModal.addEventListener('shown.bs.modal', function () {
        myInput.focus()
        })
该组件的动画效果取决于偏好减少的运动媒体查询。请参阅我们的可访问性文档的简化运动部分。

继续阅读demos和使用指南。

示例

下面是一个静态动态视窗示例（意思是它的position和display已被复写）。包括动态视窗标题、动态视窗主体（padding必要）和动态视窗页脚（可选）。尽可能地包含动态视窗标题与移除按钮，或提供另一个明确的移除操作。

Modal title

Modal body text goes here.

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

完整示例

通过点击下面的按钮切换动态视窗呈现。它将从页面顶部向下滑动并淡入。 

<!-- 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>

静态背景

当将背景设置为静态时，互动视窗不会因为点击背景而关闭。

<!-- 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>

滚动长内容

当使用者的动态视窗变得太长时，它们的滚动独立于于页面本身。透过下方示例了解：

除此之外您也可以透過在 .modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗。

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

垂直居中

加入.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和popovers可以根据需要放置在动态视窗。当动态视窗关闭时，其中的任何工具提示和插件也将自动关闭。

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

使用网格

透过在.modal-body中加入.container-fluid在互动视窗中使用Bootstrap网格系统。然后像其他任何地方一样使用正常的网格系统class。

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

可变模态内容

有数个按钮要用来触发相同互动视窗，但会导入不同内容？使用event.relatedTarget和HTML data-bs-*属性依据点击按钮来更改动态视窗的内容。

下面是HTML和JavaScript的示例。有关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

在多个模态之间切换，巧妙地放置data-bs-target和data-bs-Toggle属性。例如，可以在已打开的登录模式中切换密码重置模式。请注意，不能同时打开多个模态。这个方法只是在两个单独的模态之间切换。

Open first modal 
<!-- First modal dialog -->
        <div class="modal fade" id="modal" aria-hidden="true" aria-labelledby="..." tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        ...
        <div class="modal-footer">
          <!-- Toogle to second dialog -->
          <button class="btn btn-primary" data-bs-target="#modal2" data-bs-toggle="modal" data-bs-dismiss="modal">Open #modal2</button>
        </div>
        </div>
        </div>
        </div>
        <!-- Second modal dialog -->
        <div class="modal fade" id="modal2" aria-hidden="true" aria-labelledby="..." tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        ...
        <div class="modal-footer">
          <!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway -->
          <a class="btn btn-primary" href="#modal" data-bs-toggle="modal" role="button">Open #modal</a>
        </div>
        </div>
        </div>
        </div>
        <!-- Open first dialog -->
        <a class="btn btn-primary" data-bs-toggle="modal" href="#modal" role="button">Open #modal</a>

更改动画

$modal-fade-transform变数在互动视窗执行淡入动画前会先确定.modal-dialog的转换状态，当互动视窗的淡入动画结束时，$modal-show-transform变数会决定淡入动画结束时.modal-dialog的转换。

如果您想要一个放大的动画，您可以设定$modal-fade-transform: scale（.8）

移除动画

对于只要出现而不需要淡入淡出的互动视窗，你只需要在互动视窗中删除.fade。

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

动态高度

如果互动视窗的高度在打开时发生变化，则应呼叫myModal.handleUpdate（）以重新调整互动视窗的位置，以防滚动条出现。

可达性

请务必在.modal上添加aria-labelledby=“…”来引用互动视窗标题。另外，你也可以在.modal上使用aria-describedby来描述你的动态视窗。请注意你不需要加上role=“dialog”，因为bootstrap的JavaScript已经有添加了。

嵌入YouTube视频

在互动视窗上嵌入YouTube视频需要额外的JavaScript以自动停止回放或其他更多功能。有关详细信息，请参阅Stack Overflow的文章。 See this helpful Stack Overflow post for more information.

可选尺寸

互动视窗有三个可选的大小，透过.modal-dialog上的modifier Class启用。这些尺寸会在某些断点调整，以避免在较窄的viewport上出现水平卷轴。

Size Class Modal max-width
Small .modal-sm 300px
Default None 500px
Large .modal-lg 800px
Extra large .modal-xl 1140px

预设的互动视窗没有“medium”这个类别的大小。

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

全屏模式

另一个的覆盖选项是跳出一个完全覆盖用户屏幕的互动视窗，可透过在.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.

@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);
        }
        }
        }
        }

用法

互动视窗插件透过数据属性或JavaScript切换您隐藏的内容。它将.modal-open加到body以复写预设的滚动行为，并生成一个.modal-backdrop来提供点击区域，以便在点击动态视窗外面时移除显示的动态视窗。

通过数据属性

启动一个动态视窗而无需编写JavaScript。在控制元素上（如按钮）设置data-bs-toggle=“modal”，以及一个data-bs-target=“#foo”或href=“#foo”来指定特定的动态视窗进行切换。 

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

通过JavaScript

用一行JavaScript创建一个互动视窗：

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

选项

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

Name Type Default Description
backdrop boolean or the string 'static' true 包括模态背景元素。或者，为不在单击时关闭模式的背景指定static。
keyboard boolean true 按escape键时关闭模式
focus boolean true 初始化时将焦点放在模态上。

方法

异步方法和转换

所有API方法都是异步的，并开始转换。转换一开始就返回到调用方，但在转换结束之前返回。此外，对转换组件的方法调用将被忽略。 有关更多信息，请参阅我们的JavaScript文档。

传递选项

将你的内容启用为互动视窗，接受一个选择性的object选项。

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

切换

手动切换动态视窗。在动态视窗实际显示或隐藏之前返回给调用者（即在shown.bs.modal或hidden.bs.modal事件发生之前）。

myModal.toggle()

显示

手动打开动态视窗。在动态视窗实际显示之前返回给调用者（即在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). 

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

隐藏

手动隐藏动态视窗。在动态视窗实际隐藏之前返回给调用者（即在hidden.bs.modal事件发生之前）。

myModal.hide()

手动更新

如果动态视窗在打开状态（比如在出现卷轴的情况下）高度改变，则重新调整动态视窗的位置。

myModal.handleUpdate()

销毁

销毁一个元素的Modal。（删除DOM元素上储存的数据）

myModal.dispose()

获取实例

静态方法，可以让你获取与DOM元素相关联的互动视窗实例。

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

事件

Bootstrap的model class也有提供一些用于model功能的事件，所有相关事件都在Model本身被触发（在

）。

Event type Description
show.bs.modal 当呼叫show实例方法时，此事件会立即触发。如果是由点击事件触发，被点击的元素可作为事件的relatedTarget属性。
shown.bs.modal 当呼动视窗显示时将会触发此事件（等待CSS转换完成）。如果是由点击事件触发，被点击的元素可作为事件的relatedTarget属性.
hide.bs.modal 当呼叫hide实例方法时，将会立即触发此事件。
hidden.bs.modal 当互动视窗隐藏后将会触发此事件（等CSS转换完成）。
hidePrevented.bs.modal 当显示互动视窗后将会触发此事件，其背景是static的，model以外的点击或按下esc会被键盘选项、data-bs-keyboard设置为false。 
var myModalEl = document.getElementById('myModal')
        myModalEl.addEventListener('hidden.bs.modal', function (event) {
        // do something...
        })
返回顶部