Skip to main content

พูดคุยก่อนเริ่มอ่าน

เคยเป็นกันมั้ยครับ อยากให้หน้าเว็บมี Popup สวย ๆ แสดงขึ้นมาบนหน้าเว็บเรา แต่ก็ไม่รู้ว่าจะเขียนเองยังไง หรือบางทีเราก็ขี้เกียจเขียน อยากใช้เวลาไปทำระบบส่วนอื่น วันนี้เราจะมาสอนสร้าง Modal แบบง่าย ๆ กันครับ

ทำความรู้จักกับ Modal

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

ติดตั้ง Bootstrap 5 ให้กับหน้าเว็บของเรา

ขั้นตอนแรกนะครับ ให้เราเข้าไปที่เว็บไซต์ของ Bootstrap ครับ จากนั้น เราจะทำการเพิ่ม link และ script ลงไปครับ ให้เพิ่มลงไปในไฟล์ html ของเราแบบนี้เลยครับ โดยในที่นี้เราจะใช้ cdn นะครับ เพื่อความสะดวกและรวดเร็ว

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

การใช้งาน Modal

เรามาดู Code ของเจ้าตัว Modal กันก่อนครับ

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo 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 title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

เราจะเห็นได้ว่า Code ถูกแบ่งออกเป็นสองส่วนใหญ่ ๆ คือปุ่ม กับเนื้อหาที่จะ Popup มาครับ โดยส่วน Modal เนี่ย เราจะยังไม่เห็นในหน้าเว็บเราจนกว่าจะกดปุ่มครับ ต่อมาข้างใน Modal ก็จะถูกแบ่งออกเป็น modal-header, modal-body และ modal-footer ครับ ซึ่งส่วน header ก็จะไว้ใส่หัวข้อของ Modal นั้นครับ อย่างเช่น ยืนยันการลบข้อมูล, การเข้าสู่ระบบ อะไรประมาณนี้ครับ ถัดมา modal-body ก็จะไว้ใส่เนื้อหาต่าง ๆ ครับ ส่วนสุดท้าย modal-footer จะเป็นปุ่ม call to action ของ Modal ครับ อย่างเช่น ยืนยัน และยกเลิก

โดยหลักการทำงานของมันนะครับ ในตัวปุ่มจะมี attribute ที่ชื่อว่า data-bs-target=”#exampleModal” ซึ่งมันจะไปเรียก modal ที่มี id ตรงกันแล้วแสดงขึ้นมาครับ เผื่อว่าเรามีหลาย modal ในหนึ่งหน้า เราสามารถแก้ไอดีตรงนี้เพื่อไม่ให้ modal เรียกซ้ำกันขึ้นมาได้ครับ

การปรับแต่ง Modal

มาในส่วนของการปรับแต่งกันบ้างครับ ในตัวของ Bootstrap เขาก็จะมี class สำหรับการปรับแต่งไว้ให้เราส่วนหนึ่งครับ อย่างเช่น Code ตัวนี้ครับ จะไม่อนุญาติให้เรากดนอกพื้นที่ของ Modal เพื่อปิดมันครับ ต้องกดปุ่มเพื่อปิดอย่างเดียว โดยจะมีการเพิ่ม attribute สองตัวนี้เข้ามาใน Modal ครับ data-bs-backdrop=”static” data-bs-keyboard=”false”

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

ส่วนนี้สำหรับ Modal ที่มีเนื้อหายาวมาก ๆ เราสามารถปรับแต่งให้มันเลื่อนได้ครับ โดยการเพิ่ม Class modal-dialog-scrollable นี้ลงไปใน div ที่มี Class modal-dialog ครับ

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

ถัดมาจะเป็นการปรับแต่ง Modal ให้อยู่ระดับกึ่งกลางของหน้าจอในแนวตั้งครับ โดยปกติแล้วเนี่ย มันจะอยู่ตรงกลางในแนวนอน และอยู่ด้านบนครับ การเพิ่ม modal-dialog-centered ไปที่ modal-dialog จะจัดให้มันอยู่ตรงกลางทั้งแนวตั้งและแนวนอนได้ครับ

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

มาต่อกันที่ขนาดของ Modal กันบ้างครับ โดยขนาดปกติของ Modal นั้นจะมี Max-width อยู่ที่ 500px แต่ขนาด modal-sm จะมีขนาดอยู่ที่ 300px, modal-lg จะอยู่ที่ 800px และ modal-xl จะมีขนาดอยู่ที่ 1140 px ครับ โดยเราสามารถเพิ่มลงไปในส่วน modal-dialog ได้แบบนี้เลย โดยเราสามารถใช้ grid ใช้ flex เพื่อปรับแต่งเนื้อหาภายใน modal ได้ตามปกติเลยครับ

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

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

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

เมื่อเปิด Modal แรกแล้วเนี่ย ปุ่มที่จะพาเราไป Modal ที่ 2 จะมีการเรียกใช้ data-bs-target=”#exampleModalToggle2″ ซึ่งเป็นการเรียก Modal ที่มี id=”exampleModalToggle2″ ขึ้นมานั่นเองครับ และปุ่มที่จะพาเรากลับไปที่ Modal แรกก็จะมีการเรียก data-bs-target=”#exampleModalToggle” เพื่อเปิด Modal ตัวแรกขึ้นมานั่นเองครับ

นอกเหนือจากนี้เรายังสามารถ ปรับแต่งส่วนต่าง ๆ ของ Modal โดยการอ้างถึงคลาสนั้น ๆ ของ Modal ด้วย css ได้ตามปกติเลยครับ ไม่ว่าจะเป็น modal-title, modal-body, modal-footer ปรับแต่งได้ตามใจชอบเลยครับผม

บทส่งท้าย

เป็นยังไงกันบ้างครับ กับการใช้งาน Modal ใน Bootstrap 5 ไม่ยากเลยใช่มั้ยครับ เพียงแค่เราเพิ่ม attribute ให้ปุ่มของเรา และนำ Modal จาก Bootstrap มาปรับแต่งให้เหมาะสมกับเว็บไซต์ของเรา เท่านี้เราก็จะมี Popup สวย ๆ ในหน้าเว็บของเราแล้วครับ หวังว่าทุกคนจะได้อะไรจากบทความนี้ไม่มากก็น้อยกลับไปนะครับ ไว้พบกันใหม่ในบทความหน้าครับ สวัสดีครับ

อ้างอิงจาก

  1. Modal · Bootstrap, สืบค้นเมื่อ 11 ตุลาคม 2566 จาก https://getbootstrap.com/docs/5.0/components/modal/
ภาณุวัฒน์ พิศวงษ์

Author ภาณุวัฒน์ พิศวงษ์

More posts by ภาณุวัฒน์ พิศวงษ์

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า