สอนใช้งาน Bootstrap 4

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

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

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

การสร้าง Modal ใน Bootstrap 4 ประกอบด้วย 3 ส่วนหลัก คือ

  • ปุ่มเรียก Modal: ใช้สำหรับเรียกหน้าต่าง Modal ขึ้นมา
  • โครงสร้าง Modal: ใช้ในการกำหนดหน้าต่าง Modal ที่ต้องการแสดง
  • สคริปต์ควบคุมการทำงาน: ใช้สำหรับควบคุมการแสดงและซ่อน Modal

โค้ดตัวอย่างพื้นฐานของ Modal มีดังนี้

HTML
<!-- ปุ่มสำหรับเรียก Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  เปิด Modal
</button>

<!-- โครงสร้างของ Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        นี่คือเนื้อหาของ Modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
        <button type="button" class="btn btn-primary">บันทึกการเปลี่ยนแปลง</button>
      </div>
    </div>
  </div>
</div>

ประเภทของ Modal และการประยุกต์ใช้

Modal ขนาดเล็ก (Small Modal)

สำหรับกรณีที่ต้องการหน้าต่าง Modal ขนาดเล็ก เช่น ข้อความยืนยันสั้น ๆ สามารถใช้ modal-sm ได้ดังนี้

HTML
<!-- ปุ่มสำหรับเรียก Modal ขนาดเล็ก -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#smallModal">
  เปิด Modal ขนาดเล็ก
</button>

<!-- โครงสร้าง Modal ขนาดเล็ก -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="smallModalLabel">Modal ขนาดเล็ก</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        นี่คือ Modal ขนาดเล็ก
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
        <button type="button" class="btn btn-primary">ตกลง</button>
      </div>
    </div>
  </div>
</div>

Modal ขนาดใหญ่ (Large Modal)

หากต้องการแสดงข้อมูลจำนวนมากหรือเนื้อหาที่ซับซ้อนขึ้น สามารถใช้ Modal ขนาดใหญ่ได้ด้วยการเพิ่มคลาส modal-lg

HTML
<!-- ปุ่มสำหรับเรียก Modal ขนาดใหญ่ -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#largeModal">
  เปิด Modal ขนาดใหญ่
</button>

<!-- โครงสร้าง Modal ขนาดใหญ่ -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="largeModalLabel">Modal ขนาดใหญ่</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        นี่คือ Modal ขนาดใหญ่
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
        <button type="button" class="btn btn-primary">บันทึกการเปลี่ยนแปลง</button>
      </div>
    </div>
  </div>
</div>

Modal แบบเต็มจอ (Fullscreen Modal)

หากต้องการ Modal ที่ครอบคลุมเต็มหน้าจอ สามารถใช้การกำหนดความกว้างของหน้าต่างเป็น 100%

HTML
<!-- ปุ่มสำหรับเรียก Modal เต็มจอ -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fullScreenModal">
  เปิด Modal เต็มจอ
</button>

<!-- โครงสร้าง Modal เต็มจอ -->
<div class="modal fade" id="fullScreenModal" tabindex="-1" role="dialog" aria-labelledby="fullScreenModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="max-width: 100%;" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="fullScreenModalLabel">Modal เต็มจอ</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        นี่คือ Modal เต็มจอ
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
        <button type="button" class="btn btn-primary">บันทึกการเปลี่ยนแปลง</button>
      </div>
    </div>
  </div>
</div>

Modal ที่เลื่อนดูเนื้อหาได้ (Scrollable Modal)

กรณีที่เนื้อหาของ Modal มีจำนวนมากจนต้องการเลื่อนเพื่อดูทั้งหมด สามารถเพิ่มคุณสมบัติเลื่อนใน Modal ได้

HTML
<!-- ปุ่มสำหรับเรียก Modal ที่เลื่อนได้ -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#scrollableModal">
  เปิด Modal เลื่อนหน้าต่าง
</button>

<!-- โครงสร้าง Modal ที่เลื่อนได้ -->
<div class="modal fade" id="scrollableModal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="scrollableModalLabel">Modal เลื่อนหน้าต่างได้</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        นี่คือ Modal ที่สามารถเลื่อนหน้าต่างได้ ซึ่งมีเนื้อหายาวมาก
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
        <button type="button" class="btn btn-primary">บันทึกการเปลี่ยนแปลง</button>
      </div>
    </div>
  </div>
</div>

การควบคุม Modal ด้วย JavaScript

การใช้งาน Modal สามารถควบคุมผ่าน JavaScript ได้ เช่น การเปิดหรือปิด Modal

JavaScript
// เปิด Modal
$('#exampleModal').modal('show');

// ปิด Modal
$('#exampleModal').modal('hide');

// ปิด Modal แบบกำหนดเวลาล่วงหน้า
setTimeout(function(){
  $('#exampleModal').modal('hide');
}, 5000); // ปิดหลัง 5 วินาที

Animation

การเพิ่ม Animation ให้กับ Modal ใน Bootstrap 4 ช่วยให้การแสดงและซ่อน Modal มีความราบรื่นและน่าสนใจมากยิ่งขึ้น โดยค่าเริ่มต้น Bootstrap 4 จะมีการเพิ่ม เอฟเฟกต์การซีดจาง (fade) ให้กับ Modal แต่ผู้ใช้สามารถปรับแต่งและใช้งานการแสดงผลแบบอื่น ๆ เพิ่มเติมได้ตามต้องการ

การใช้งาน Animation ที่มากับ Bootstrap 4 (เอฟเฟกต์ Fade)

ใน Bootstrap 4 การเพิ่มการเคลื่อนไหว (animation) ให้กับ Modal สามารถทำได้โดยการใช้คลาส fade ซึ่งจะทำให้ Modal แสดงการค่อย ๆ ซีดจางเมื่อเปิดหรือปิด Modal โดยคลาส fade นี้จะถูกใช้ในโครงสร้างของ Modal ดังนี้

HTML
<!-- ปุ่มสำหรับเรียก Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#animatedModal">
  เปิด Modal พร้อม Animation
</button>

<!-- โครงสร้าง Modal พร้อม Animation -->
<div class="modal fade" id="animatedModal" tabindex="-1" role="dialog" aria-labelledby="animatedModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="animatedModalLabel">Modal พร้อม Animation</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        นี่คือ Modal ที่แสดงผลแบบ fade-in และ fade-out เมื่อเปิดและปิด
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
        <button type="button" class="btn btn-primary">บันทึกการเปลี่ยนแปลง</button>
      </div>
    </div>
  </div>
</div>

การทำงานของ fade

  • เมื่อ Modal ถูกเปิด (show): จะมีการค่อย ๆ แสดงขึ้นมา (fade-in)
  • เมื่อ Modal ถูกปิด (hide): จะมีการค่อย ๆ หายไป (fade-out)

การเพิ่ม Animation แบบกำหนดเอง

นอกเหนือจากการใช้เอฟเฟกต์ fade เริ่มต้นของ Bootstrap 4 เราสามารถกำหนดการเคลื่อนไหวแบบอื่น ๆ ได้เอง โดยการใช้ CSS หรือ JavaScript เพื่อปรับแต่งการแสดงผลของ Modal

ตัวอย่างการเพิ่ม Animation แบบกำหนดเองโดยใช้ CSS

  1. สร้าง CSS สำหรับการเคลื่อนไหว เช่น การเลื่อน (slide-in) หรือ การขยาย (zoom-in)
CSS
@keyframes slideIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.modal.custom-animated .modal-dialog {
  animation: slideIn 0.5s forwards;
}

.modal.custom-animated.hide .modal-dialog {
  animation: slideOut 0.5s forwards;
}
  1. ปรับใช้ CSS ในโครงสร้างของ Modal
HTML
<!-- ปุ่มสำหรับเรียก Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
  เปิด Modal พร้อม Animation แบบกำหนดเอง
</button>

<!-- โครงสร้าง Modal พร้อม Animation แบบกำหนดเอง -->
<div class="modal fade custom-animated" id="customModal" tabindex="-1" role="dialog" aria-labelledby="customModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="customModalLabel">Modal พร้อม Animation แบบกำหนดเอง</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        นี่คือ Modal ที่มี Animation แบบเลื่อนขึ้นเมื่อเปิด และเลื่อนลงเมื่อปิด
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
        <button type="button" class="btn btn-primary">บันทึกการเปลี่ยนแปลง</button>
      </div>
    </div>
  </div>
</div>
การทำงานของ Animation แบบกำหนดเอง:
  • เมื่อ Modal ถูกเปิด (show): หน้าต่าง Modal จะเลื่อนจากด้านบนลงมา (slide-in)
  • เมื่อ Modal ถูกปิด (hide): หน้าต่าง Modal จะเลื่อนกลับขึ้นไปด้านบน (slide-out)

การใช้งาน JavaScript ร่วมกับ Animation

นอกจากการใช้ CSS เพื่อเพิ่ม Animation แล้ว เรายังสามารถควบคุมการแสดงผลของ Modal ด้วย JavaScript โดยใช้ event listener เพื่อเพิ่มหรือเปลี่ยนเอฟเฟกต์ตามที่ต้องการ

JavaScript
// เมื่อ Modal ถูกแสดง
$('#customModal').on('show.bs.modal', function (e) {
  console.log('Modal กำลังถูกเปิด');
  // สามารถเพิ่ม logic หรือ Animation อื่น ๆ ได้ที่นี่
});

// เมื่อ Modal ถูกปิด
$('#customModal').on('hide.bs.modal', function (e) {
  console.log('Modal กำลังถูกปิด');
  // สามารถเพิ่ม logic หรือ Animation อื่น ๆ ได้ที่นี่
});
Tags
แชร์เรื่องนี้

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