Bootstrap 5 模態

模態

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

如何創建模態

下例展示如何創建基本模態：

實例

<!-- 打開模態的按鈕 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>
<!-- 模態 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模態標題 -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- 模態主體 -->
      <div class="modal-body">
        模態主體 ..
      </div>
      <!-- 模態頁腳 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">關閉</button>
      </div>
    </div>
  </div>
</div>

親自試一試

添加動畫

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

實例

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

親自試一試

模態尺寸

通過為小模態添加 .modal-sm 類（max-width 300px）、為大型模態添加 .modal-lg 類（max-width 800px）或為超大模態添加 .modal-xl 來更改模態的大小（max-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">

親自試一試

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

全屏模態

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

實例

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

親自試一試

響應式全屏模態

您還可以使用 .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 以下全屏 親自試一試

居中的模態

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

實例

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

親自試一試

滾動模態

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

實例

<div class="modal-dialog">

親自試一試

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

實例

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

親自試一試