Bootstrap 模态框

Bootstrap 5 模态框插件

模态框插件

模态框插件是一个多功能的对话框或弹出窗口，显示在当前页面之上。它用于警报、用户通知、表单或自定义内容。

模态框是一种常见的方式，可以在不离开当前页面的情况下，将用户的注意力集中到特定的任务或信息上。

	提示：Bootstrap 的 JavaScript 组件，包括模态框，可以在 `bootstrap.bundle.min.js` 文件中找到（该文件包含 Popper.js，它是 tooltips/popovers 的依赖项，但通常为方便打包在一起）或单独的文件中找到（例如 `modal.js`）。对于大多数用户，建议使用 `bootstrap.bundle.min.js`。

如何创建模态框

以下示例展示了如何创建一个基本的模态框，通过按钮触发：

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Header</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        <p>Some text in the modal body...</p>
        <p>This modal demonstrates the basic structure. You can put any HTML content here, like forms, images, or videos.</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>

<!--
  实际应用：将模态框用于登录/注册表单、确认对话框、图片画廊或重要的警报。
  可访问性说明：`tabindex="-1"`、`aria-labelledby` 和 `aria-hidden="true"` 对于可访问性很重要。`.btn-close` 也有 `aria-label`。
-->

示例解释

触发器（按钮/链接）：

使用按钮或链接来触发模态框。
data-bs-toggle="modal"：此属性告诉 Bootstrap 将此元素视为模态框触发器。
data-bs-target="#myModal"：此属性指向要打开的模态框 <div> 的 id。

模态框结构（主 <div>）：

模态框的父级 <div> 必须有一个 id 与 data-bs-target 的值匹配（例如 id="myModal"）。
.modal 类：标识该 <div> 为模态框并应用基础样式。
.fade 类：添加淡入淡出的过渡效果。如果不想要动画，可以移除此 class。
tabindex="-1"：允许模态框获得焦点并支持通过键盘关闭（按 Esc 键）。
aria-labelledby="myModalLabel"：为屏幕阅读器将模态框与其标题（由 id="myModalLabel" 标识）关联起来。
aria-hidden="true"：初始时对辅助技术隐藏模态框。Bootstrap 在显示/隐藏过程中会管理此属性。
.modal-dialog 类：设置模态框的适当宽度、外边距和位置。可以使用尺寸类进一步自定义。

模态框内容 (.modal-content):

带有 .modal-content 类的 <div> 设置模态框的外观样式（边框、背景颜色、阴影等）。在此 <div> 内，通常会添加一个头部、主体和底部。
.modal-header：定义模态框头部的样式。通常包含一个标题 (.modal-title) 和一个关闭按钮。
关闭按钮（<button type="button" class="btn-close" ...>）使用 data-bs-dismiss="modal" 来关闭模态框，并使用 aria-label="Close" 以提高可访问性。
.modal-body：定义模态框主要内容区域的样式。你可以在此处放置任何 HTML 标记。
.modal-footer：定义模态框底部的样式。此区域通常用于操作按钮（例如保存、关闭），并且默认右对齐。

常见障碍：模态框不出现或无法关闭。仔细检查触发器上的 data-bs-target 是否与模态框的 id 匹配，以及关闭按钮上的 data-bs-dismiss="modal" 是否正确放置。

模态框尺寸

通过在带有 .modal-dialog 类的 <div> 元素上添加可选的尺寸类来改变模态框的大小：

.modal-sm 用于小型模态框。
.modal-lg 用于大型模态框。
.modal-xl 用于超大型模态框。

如果没有应用尺寸类，模态框将具有默认的中等尺寸。

大型模态框示例：

<div class="modal-dialog modal-lg">
  <!-- Modal content -->
</div>

全屏模态框：

Bootstrap 5 还支持覆盖整个视口的全屏模态框。使用 .modal-fullscreen（始终全屏）、.modal-fullscreen-sm-down（在 sm 断点及以下全屏）、.modal-fullscreen-md-down 等类。

在小型设备及以下全屏的模态框示例：

<div class="modal-dialog modal-fullscreen-sm-down">
  <!-- 资源：在官方文档中探索更多模态框选项和行为：https://getbootstrap.com/docs/5.3/components/modal/ -->
</div>

<!-- Resource: Explore more modal options and behaviors in the official documentation: https://getbootstrap.com/docs/5.3/components/modal/ -->

完整的 Bootstrap 模态框参考

有关所有模态框选项（如 backdrop、keyboard、focus）、方法（如 show、hide、toggle、dispose）和事件（如 show.bs.modal、hidden.bs.modal）的完整参考，请查阅 Bootstrap 5 模态框官方文档。