模態(tài)

模態(tài)

Modal 組件是一種對話框/彈出窗口，顯示在當前頁面的上部：

如何創(chuàng)建模態(tài)

下例展示如何創(chuàng)建基本模態(tài)：

實例

<!-- 打開模態(tài)的按鈕 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>

<!-- 模態(tài) -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- 模態(tài)標題 -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- 模態(tài)主體 -->
      <div class="modal-body">
        模態(tài)主體 ..
      </div>

      <!-- 模態(tài)頁腳 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">關閉</button>
      </div>

    </div>
  </div>
</div>

添加動畫

請使用 .fade 類在打開和關閉模態(tài)時添加淡入淡出效果：

實例

<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->
<div class="modal"></div>

模態(tài)尺寸

通過為小模態(tài)添加 .modal-sm 類（max-width 300px）、為大型模態(tài)添加 .modal-lg 類（max-width 800px）或為超大模態(tài)添加 .modal-xl 來更改模態(tài)的大?。╩ax-width 1140 像素）。默認為 500 像素最大寬度。

請將 .modal-dialog 類與尺寸類一同添加到 <div> 元素：

Small Modal

<div class="modal-dialog modal-sm">

Large Modal

<div class="modal-dialog modal-lg">

Extra Large Modal

<div class="modal-dialog modal-xl">

默認情況下，模態(tài)的大小為 "medium"（500px max-width）。

全屏模態(tài)

如果您希望模態(tài)跨越頁面的整個寬度和高度，請使用 .modal-fullscreen 類：

實例

<div class="modal-dialog modal-fullscreen">

響應式全屏模態(tài)

您還可以使用 .modal-fullscreen-*-* 類控制模態(tài)何時應全屏顯示：

類	描述	例子
.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 以下全屏

居中的模態(tài)

通過使用 .modal-dialog-centric 類，在頁面內垂直和水平居中模態(tài)：

實例

<div class="modal-dialog modal-dialog-centered">

滾動模態(tài)

當模態(tài)中有很多內容時，會向頁面添加一個滾動條。請看下面的例子來理解：

實例

<div class="modal-dialog">

但是，通過將 .modal-dialog-scrollable 添加到 .modal-dialog 可以只在模態(tài)內滾動，而不是頁面本身：

實例

<div class="modal-dialog modal-dialog-scrollable">