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

ทดสอบด้วยตัวเอง

โมดอลที่ใหญ่เกิน

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

ทดสอบด้วยตัวเอง

โดยเริ่มต้นของโมดอลคือ "medium" (max-width 500px)

โมดอลโฟล์ลสเกน

หากคุณต้องการให้โมดอลครอบทั้งหน้าจอทั้งความกว้างและความสูงของหน้าที่อยู่ โปรดใช้ .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">

ทดสอบด้วยตัวเอง