การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Modal

Modal เป็นส่วนหนึ่งของ Bootstrap ที่ช่วยในการสร้างหน้าต่างป็อปอัพ (popup) เพื่อแสดงข้อมูลเพิ่มเติมโดยไม่ต้องโหลดหน้าเว็บใหม่ ซึ่งผู้ใช้สามารถทำการยืนยันข้อมูล หรือตอบโต้การใช้งานได้โดยตรงในหน้าต่าง Modal นั้น การใช้งาน Modal ใน Bootstrap 5 นั้นสามารถปรับแต่งและประยุกต์ใช้ได้หลายลักษณะตามความต้องการของผู้ใช้งาน

โครงสร้างพื้นฐานของ Modal

โครงสร้างของ Modal ใน Bootstrap 5 ประกอบไปด้วย div หลายชั้นซ้อนกันเพื่อแยกส่วนต่าง ๆ ของ Modal ซึ่งโครงสร้างพื้นฐานมีดังนี้

<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  เปิด 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">
        <h5 class="modal-title" id="exampleModalLabel">หัวข้อของ Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        เนื้อหาของ Modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
        <button type="button" class="btn btn-primary">บันทึกการเปลี่ยนแปลง</button>
      </div>
    </div>
  </div>
</div>
  • <button>: ปุ่มที่ใช้ในการเรียก Modal โดยการตั้งค่า data-bs-toggle="modal" และ data-bs-target="#exampleModal" เพื่ออ้างอิง Modal ที่ต้องการแสดง
  • .modal: ตัว Modal เอง โดยมี id="exampleModal" ซึ่งจะถูกใช้ในการอ้างอิงจากปุ่มเปิด Modal
  • .modal-dialog: กำหนดขนาดของหน้าต่าง
  • .modal-content: เนื้อหาทั้งหมดของ Modal
  • .modal-header: ส่วนหัวของ Modal รวมถึงปุ่มปิด
  • .modal-body: เนื้อหาหลักของ Modal
  • .modal-footer: ปุ่มต่าง ๆ ที่ด้านล่างของ Modal เช่น ปุ่มปิดและปุ่มบันทึก

ปุ่มเปิด Modal

Modal ที่ได้

การประยุกต์ใช้ลักษณะต่าง ๆ ของ Modal

ขนาดของ Modal

เราสามารถเปลี่ยนขนาดของ Modal ได้โดยการเพิ่มคลาส modal-lg, modal-sm, หรือ modal-xl ในส่วน .modal-dialog เช่น

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

Modal แบบ Scrollable

หากเนื้อหาภายใน Modal มีความยาวมากเกินไป เราสามารถตั้งค่าให้ Modal สามารถเลื่อนขึ้นลงได้โดยการเพิ่มคลาส modal-dialog-scrollable

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

Modal แบบ Centered

ในการจัดวาง Modal ให้อยู่กลางหน้าจอทั้งแนวตั้งและแนวนอน สามารถใช้คลาส modal-dialog-centered

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

Modal แบบ Fullscreen

เราสามารถสร้าง Modal ให้เต็มหน้าจอโดยการใช้คลาส modal-fullscreen

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

การเปิด Modal อัตโนมัติ

หากต้องการให้ Modal เปิดอัตโนมัติเมื่อโหลดหน้า สามารถใช้ JavaScript สั่งเปิด Modal ได้

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
    myModal.show();
  });
</script>

การปิด Modal

การปิด Modal สามารถทำได้หลายวิธี ดังนี้

  • กดปุ่มที่มีคลาส data-bs-dismiss="modal"
  • คลิกที่บริเวณรอบนอกของ Modal
  • กดปุ่ม “Esc” บนแป้นพิมพ์

หากต้องการปิดการปิดด้วยการคลิกบริเวณนอก Modal สามารถตั้งค่า backdrop เป็น static

<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
  ...
</div>

Modal หลายชั้น (Nested Modal)

ในบางกรณีเราอาจต้องการให้มี Modal ซ้อนกัน สามารถทำได้โดยให้ Modal ที่สองถูกซ้อนอยู่ใน Modal แรก

<!-- Trigger Nested Modal -->
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#nestedModal">
  เปิด Nested Modal
</button>

<!-- Nested Modal -->
<div class="modal fade" id="nestedModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Nested Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        นี่คือ Nested Modal
      </div>
    </div>
  </div>
</div>

สรุป

การใช้งาน Modal ใน Bootstrap 5 เป็นเครื่องมือที่ช่วยในการสร้างอินเตอร์เฟสที่ใช้งานง่ายและสะดวก โดยมีความสามารถในการปรับแต่งขนาด การจัดวาง และการประยุกต์ใช้งานตามความต้องการของโปรเจค นอกจากนี้ยังสามารถเปิด Modal แบบอัตโนมัติหรือซ้อนกันได้ ซึ่งทั้งหมดนี้ช่วยในการสร้างประสบการณ์ที่ดีขึ้นสำหรับผู้ใช้

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ