Bootstrap V5.3 : Modal 模态框中文翻译版

使用 Bootstrap 的 JavaScript 模式插件向您的网站添加灯箱、用户通知或完全自定义内容的对话框。

运作方式

在开始使用 Bootstrap 的模态组件之前，请务必阅读以下内容，因为我们的菜单选项最近发生了变化。

模态是使用 HTML、CSS 和 JavaScript 构建的。它们位于文档中的其他所有内容之上，并从中删除滚动，以便模式内容滚动。<body>
单击模态“背景”将自动关闭模态。
Bootstrap 一次只支持一个模态窗口。不支持嵌套模式，因为我们认为它们的用户体验很差。
模态使用，有时对其渲染有点讲究。只要有可能，请将模态 HTML 放在顶级位置，以避免其他元素的潜在干扰。在另一个固定元素中嵌套 a 时，您可能会遇到问题。position: fixed.modal
同样，由于，在移动设备上使用模态有一些注意事项。有关详细信息，请参阅我们的浏览器支持文档。position: fixed
由于 HTML5 定义其语义的方式，自动对焦 HTML 属性在 Bootstrap 模态中没有作用。要实现相同的效果，请使用一些自定义 JavaScript：

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

此组件的动画效果取决于媒体查询。请参阅我们辅助功能文档的减少运动部分。prefers-reduced-motion

继续阅读演示和使用指南。

例子

下面是一个静态模态示例（表示其和已被覆盖）。包括模态页眉、模态正文（必需）和模态页脚（可选）。我们要求您尽可能在关闭作中包含模式标头，或提供另一个显式关闭作。positiondisplaypadding

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

在上面的静态示例中，我们使用，以避免文档页面中的标题层次结构出现问题。然而，从结构上讲，模态对话框表示其自己单独的文档/上下文，因此理想情况下，该对话框应为 .如有必要，您可以使用字体大小实用程序来控制标题的外观。以下所有实时示例都使用这种方法。<h5>.modal-title<h1>

现场演示

单击下面的按钮切换工作模态演示。它将向下滑动并从页面顶部淡入。

<!-- 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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <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">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
        <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-scrollable.modal-dialog

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

工具提示和弹出框

可以根据需要将工具提示和弹出框放置在模式中。关闭模式时，其中的任何工具提示和弹出框也会自动关闭。

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

使用网格

通过嵌套在 .然后，像在其他任何地方一样使用普通的网格系统类。.container-fluid.modal-body

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

有一堆按钮都触发相同的模态，但内容略有不同？使用和 HTML data-bs-* 属性根据单击的按钮来改变模式的内容。event.relatedTarget

下面是一个现场演示，然后是示例 HTML 和 JavaScript。有关更多信息，请阅读模态事件文档以获取有关的详细信息。relatedTarget

[HTML全文]

<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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
        <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>

网站/src/assets/partials/snippets.js

const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
  exampleModal.addEventListener('show.bs.modal', event => {
    // Button that triggered the modal
    const button = event.relatedTarget
    // Extract info from data-bs-* attributes
    const 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.
    const modalTitle = exampleModal.querySelector('.modal-title')
    const modalBodyInput = exampleModal.querySelector('.modal-body input')

    modalTitle.textContent = `New message to ${recipient}`
    modalBodyInput.value = recipient
  })
}

在模态之间切换

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

[HTML全文]

<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">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
        <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">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">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
        <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">Back to first</button>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>

更改动画

变量确定模态淡入动画之前的变换状态，变量确定模态淡入动画结束时的变换。$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()

可及性

请务必将，引用模态标题添加到。此外，您可以使用 on 对模态对话进行描述。请注意，您不需要添加，因为我们已经通过 JavaScript 添加了它。aria-labelledby="...".modalaria-describedby.modalrole="dialog"

嵌入 YouTube 视频

在模态中嵌入 YouTube 视频需要额外的 JavaScript 而不是在 Bootstrap 中，以自动停止播放等等。有关更多信息，请参阅这篇有用的 Stack Overflow 帖子。

可选尺寸

模态有三种可选大小，可通过修饰符类放置在 .这些大小在某些断点处启动，以避免较窄视口上的水平滚动条。.modal-dialog

大小	类	模态最大宽度
小	`.modal-sm`	`300px`
违约	没有	`500px`
大	`.modal-lg`	`800px`
特大号	`.modal-xl`	`1140px`

我们没有修饰符类的默认模态构成了“中等”大小的模态。

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

另一个覆盖是弹出覆盖用户视口的模式的选项，可通过放置在 ..modal-dialog

类	可用性
`.modal-fullscreen`	总是
`.modal-fullscreen-sm-down`	`576px`
`.modal-fullscreen-md-down`	`768px`
`.modal-fullscreen-lg-down`	`992px`
`.modal-fullscreen-xl-down`	`1200px`
`.modal-fullscreen-xxl-down`	`1400px`

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

CSS系统

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，模态现在使用本地 CSS 变量来增强实时自定义。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。.modal.modal-backdrop

scss/_modal.scss

--#{$prefix}modal-zindex: #{$zindex-modal};
--#{$prefix}modal-width: #{$modal-md};
--#{$prefix}modal-padding: #{$modal-inner-padding};
--#{$prefix}modal-margin: #{$modal-dialog-margin};
--#{$prefix}modal-color: #{$modal-content-color};
--#{$prefix}modal-bg: #{$modal-content-bg};
--#{$prefix}modal-border-color: #{$modal-content-border-color};
--#{$prefix}modal-border-width: #{$modal-content-border-width};
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};

scss/_modal.scss

--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass 变量

scss/_variables.scss

$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:               var(--#{$prefix}body-color);
$modal-content-bg:                  var(--#{$prefix}body-bg);
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        var(--#{$prefix}border-width);
$modal-content-border-radius:       var(--#{$prefix}border-radius-lg);
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm);
$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow);

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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);

Sass 循环

响应式全屏模态是通过地图和中的循环生成的。$breakpointsscss/_modal.scss

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,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

用法

模式插件通过数据属性或 JavaScript 按需切换隐藏内容。它还会覆盖默认滚动行为，并生成一个单击区域，以便在单击模态外时关闭显示的模态。.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>

解雇

可以通过模态中按钮上的属性来实现关闭，如下所示：data-bs-dismiss

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

或在模态之外的按钮上使用附加项，如下所示：data-bs-target

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

虽然支持关闭模式的两种方法，但请记住，从模式外部关闭与 ARIA 创作实践指南对话框（模式）模式不匹配。这样做的风险由您自行承担。

通过 JavaScript

使用单行 JavaScript 创建一个模态：

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

选项

由于选项可以通过数据属性或 JavaScript 传递，因此您可以将选项名称附加到，如。通过数据属性传递选项时，请确保将选项名称的大小写类型从“camelCase”更改为“kebab-case”。例如，使用代替。data-bs-data-bs-animation="{value}"data-bs-custom-class="beautifier"data-bs-customClass="beautifier"

从 Bootstrap 5.2.0 开始，所有组件都支持实验性保留数据属性，该属性可以将简单的组件配置作为 JSON 字符串容纳。当元素具有和属性时，最终值将是，并且单独的数据属性将覆盖上给出的值。此外，现有数据属性能够容纳 JSON 值，例如 .data-bs-configdata-bs-config='{"delay":0, "title":123}'data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

最终配置对象是、的合并结果，其中最新给定的键值覆盖其他键值。data-bs-configdata-bs-js object

名字	类型	违约	描述
`backdrop`	布尔`’static'`	`true`	包括一个模态背景元素。或者，指定单击时不关闭模态的背景。`static`
`focus`	布尔	`true`	初始化时将焦点放在模态上。
`keyboard`	布尔	`true`	按下 Escape 键时关闭模态。

方法

所有 API 方法都是异步的，并启动转换。它们在转换开始后立即返回给调用方，但在转换结束之前。此外，对转换组件的方法调用将被忽略。在我们的 JavaScript 文档中了解更多信息。

传递选项

将内容激活为模式。接受可选选项。object

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

方法	描述
`dispose`	销毁元素的模态。（删除 DOM 元素上存储的数据）
`getInstance`	静态方法，允许您获取与 DOM 元素关联的模态实例。
`getOrCreateInstance`	静态方法，允许您获取与 DOM 元素关联的模态实例，或创建一个新实例，以防它未初始化。
`handleUpdate`	如果模态的高度在打开时发生变化（即出现滚动条），请手动重新调整模态的位置。
`hide`	手动隐藏模态。在模态实际隐藏之前（即在事件发生之前）返回给调用者。`hidden.bs.modal`
`show`	手动打开模态。在模态实际显示之前（即事件发生之前）返回给调用者。此外，您可以将 DOM 元素作为参数传递，该参数可以在模态事件中接收（作为属性）。（即 .`shown.bs.modalrelatedTargetconst modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`
`toggle`	手动切换模态。在模态实际显示或隐藏之前（即在 or 事件发生之前）返回给调用者。`shown.bs.modalhidden.bs.modal`

事件

Bootstrap 的模态类公开了一些用于挂接到模态功能的事件。所有模态事件都向模态本身触发（即在的）。<div class="modal">

事件	描述
`hide.bs.modal`	调用实例方法后，会立即触发此事件。可以通过调用来防止。有关事件防护的更多详细信息，请参阅 JavaScript 事件文档。`hideevent.preventDefault()`
`hidden.bs.modal`	当模态对用户隐藏完毕（将等待 CSS 转换完成）时，将触发此事件。
`hidePrevented.bs.modal`	当模态显示时触发此事件，其背景是，并且在模态之外执行单击。当按下转义键并将选项设置为时，也会触发该事件。`statickeyboardfalse`
`show.bs.modal`	调用实例方法时，此事件会立即触发。如果由点击引起，则点击的元素可作为事件的属性使用。`showrelatedTarget`
`shown.bs.modal`	当模态对用户可见时，将触发此事件（将等待 CSS 转换完成）。如果由点击引起，则点击的元素可作为事件的属性使用。`relatedTarget`

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

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

Modal 模态框

运作方式

例子

现场演示

静态背景

滚动长内容

垂直居中

工具提示和弹出框

使用网格

在模态之间切换

更改动画

删除动画

动态高度

可及性

嵌入 YouTube 视频

可选尺寸

CSS系统

变量

Sass 变量

Sass 循环

用法

通过数据属性

切换

解雇

通过 JavaScript

选项

方法

传递选项

事件

Modal 模态框

运作方式

例子

模态组件

模态标题

现场演示

静态背景

滚动长内容

垂直居中

工具提示和弹出框

使用网格

不同的模态内容

在模态之间切换

更改动画

删除动画

动态高度

可及性

嵌入 YouTube 视频

可选尺寸

全屏模态

CSS系统

变量

Sass 变量

Sass 循环

用法

通过数据属性

切换

解雇

通过 JavaScript

选项

方法

传递选项

事件