พูดคุยก่อนเริ่มอ่าน
เคยเป็นกันมั้ยครับ อยากให้หน้าเว็บมี 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 สวย ๆ ในหน้าเว็บของเราแล้วครับ หวังว่าทุกคนจะได้อะไรจากบทความนี้ไม่มากก็น้อยกลับไปนะครับ ไว้พบกันใหม่ในบทความหน้าครับ สวัสดีครับ
อ้างอิงจาก
- Modal · Bootstrap, สืบค้นเมื่อ 11 ตุลาคม 2566 จาก https://getbootstrap.com/docs/5.0/components/modal/
