ใช้ Bootstrap Framework สร้าง Modal: คู่มือฉบับสมบูรณ์

Modal คือหน้าต่างที่แยกจากหน้าต่างหลักของหน้าเว็บ จุดประสงค์หลักคือปิดกั้นหน้าต่างหลักจากการโต้ตอบของผู้ใช้ และแชร์ข้อมูลหรือยืนยันบางอย่างกับผู้ใช้ Modal windows ยอดนิยมใช้เป็นคอมโพเนนต์ล็อกอิน การยืนยันอินพุตของผู้ใช้ หรือการใช้งานอื่นๆ อีกมากมาย

Bootstrap เป็น framework ที่ช่วยให้เราสร้าง components ได้เร็วมาก ในบทความนี้ เราจะทบทวนวิธีตั้งค่า Bootstrap เรียนรู้ว่าทำไมเราต้องการ modal และดูตัวอย่าง modals ในการทำงานจริงโดยใช้ Bootstrap framework

เริ่มต้นใช้งาน

เพื่อให้แน่ใจว่าเราสามารถดู modal ในหน้าเว็บของเราได้ ให้แน่ใจว่าเรามี dependencies ที่เหมาะสม สำหรับโปรเจกต์นี้ เราต้องการ Bootstrap, Popper.JS และ jQuery ไปที่หน้า Quick Start ของ Bootstrap เพื่อความช่วยเหลือในการได้ dependencies ทั้งหมด

ขึ้นอยู่กับคุณว่าจะลิงก์แพ็คเกจที่เราต้องการอย่างไร แต่วิธีที่ง่ายที่สุด เหมาะกับผู้เริ่มต้นที่สุด คือใช้ content delivery network – CDN – สำหรับ jQuery, Popper.js, และ Bootstrap ระวังลำดับของแท็ก <script> – ลำดับสำคัญที่นี่

เมื่อไหร่ควรใช้ Modal

Modals เหมาะสำหรับ web-based applications ที่ต้องดึงดูดความสนใจของผู้ใช้บ้างครั้ง

เมื่อล็อกอินเข้าเว็บไซต์ธนาคาร ตัวอย่างเช่น แล้วไปที่แท็บอื่น แล้วกลับไปที่เว็บไซต์แรก คุณอาจเห็น modal ป๊อปอัพ แสดงว่าคุณจะถูกล็อกเอาท์เนื่องจากไม่ได้ใช้งาน การตรวจจับ inactivity เป็นตัวอย่างหลักของเมื่อต้องการ modal การตั้งค่าของธนาคารไม่อนุญาตให้โต้ตอบเพิ่มเติมบนไซต์จนกว่าผู้ใช้จะตัดสินใจว่าจะอยู่ต่อหรือล็อกเอาท์

จากมุมมองการพัฒนา modals ช่วยเก็บเว็บไซต์ไม่ให้ refresh ไปหน้าใหม่เมื่อไม่จำเป็น จำนวนมากของผู้ค้าปลีกออนไลน์ใช้วิธีนี้เพื่อให้ "Quick View" แก่ผู้ใช้ เพื่อให้ผู้ใช้ไม่เพียงแต่นำทางเว็บไซต์เร็วขึ้น แต่ช็อปปิ้งเร็วขึ้น Quick Views ไม่ต้องการโหลดหน้าใหม่ทั้งหน้าเพื่อรับข้อมูลสินค้า

หากผู้ใช้ต้องเข้าถึงเนื้อหาหน้าจอหลักขณะโต้ตอบกับ modal ให้ใช้ UI element อื่นแทน จุดประสงค์ของ modal คือเอาการโต้ตอบกับหน้าต่างหลักไป ให้ control ไปที่ modal

81% ของผู้เข้าร่วมระบุว่ารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสงานทางเทคโนโลยีหลังจากเข้าร่วมบูทแคมป์ ได้รับการจับคู่กับบูทแคมป์วันนี้

นักศึกษาจบบูทแคมป์เฉลี่ยใช้เวลาน้อยกว่า 6 เดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มบูทแคมป์จนหางานแรก

ใช้ Bootstrap สร้าง Modal

Modals ตามประเพณีสร้างด้วย HTML, CSS และ JavaScript ภาษาทั้งหมดนี้สำคัญต่อการสร้าง modal แต JavaScript เป็นสิ่งจำเป็นเพื่อให้ modals ทำงาน JavaScript คือสวิตช์ที่จะเปิดหรือปิด modal

เมื่อใช้ Bootstrap มันดีที่จะมีเอกสารประกอบพร้อมไว้ เพื่อให้คุณ copy และ paste โค้ด modal ได้อย่างถูกต้อง ขณะที่คุณเรียนรู้การใช้ Bootstrap และวิธีการทำงานของ components เหล่านี้ ฉันแนะนำให้ copy/paste แล้ว comment โค้ด เพื่อให้คุณรู้หรือค้นหาได้ว่าแต่ละบรรทัดของโค้ดทำอะไร

เนื่องจากเราไม่ได้ reinvent the wheel ที่นี่ด้วยการใช้โค้ด modal ของ Bootstrap จึงสำคัญมากที่จะรู้ว่ามันทำงานอย่างไร เพื่อคุณจะอธิบายให้อีกคนฟังได้ ไม่คุ้มค่าที่จะ copy และ paste ถ้าคุณอธิบายไม่ได้ว่าทำไมมันทำงาน

เปิด Modal ด้วยปุ่ม

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >Launch demo modal </button>

โค้ดนี้มาจากเอกสารของ Bootstrap โดยตรงเกี่ยวกับวิธีสร้าง modal โดยใช้ framework ของพวกเขา ส่วนที่เหลือของบทความใช้ไปกับการอธิบายโค้ด เพื่อให้เราแน่ใจว่ารู้ว่า markup หมายถึงอะไร เราครอบคลุมหลักๆ แอตทริบิวต์ในส่วนนี้

 class="btn btn-primary"

เรารู้ว่า class หมายถึงอะไรเกี่ยวกับ CSS ที่นี่ไม่ต่างอะไร Classes ที่ระบุตรงกับ Bootstrap stylesheet ที่เราอ้างอิงใน head ของเอกสาร HTML

Class "btn" ควบคุมสไตลิงส่วนใหญ่ของปุ่ม สีถูกควบคุมโดยชื่อ class ที่สอง ลองเปลี่ยน "btn-primary" เป็นสีปุ่มทั่วไปอื่น (เช่น btn-secondary หรือ btn-danger) เพื่อดูว่าจะเกิดอะไรขึ้น

 data-toggle="modal"

แอตทริบิวต์นี้ตรงกับแอตทริบิวต์ data-dismiss ที่เป็นส่วนหนึ่งของปุ่มภายใน modal

 data-target="#exampleModal"

แอตทริบิวต์ data-target เป้าหมายบล็อกโค้ดที่มี id exampleModal exampleModal คือเนื้อหา modal จริงของเรา มันดึงข้อมูลจากบล็อกที่ระบุ

นี่สำคัญมากหากเรามี multiple modals บนหน้าเดียวกัน คุณต้องการเปลี่ยนแอตทริบิวต์ data-target และ id เพื่อให้ modal เดียวเปิดในเวลาเดียวกัน

Event handlers ทั้งหมดถูกจัดการโดย Bootstrap โดยใช้ jQuery และ Popper.js ไม่ต้องกังวลว่าจะทำอะไรเมื่อผู้ใช้คลิก เพราะมันจัดการแล้ว! เพื่อให้แน่ใจว่ามันยังคงทำงาน อย่าเปลี่ยนชื่อ class ต้นฉบับใดๆ เพราะนี่คือวิธีที่พวกมันถูกเลือกใน CSS ของเรา

องค์ประกอบ Modal หลัก

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > ... Modal stuff here ... </div>

เหมือนด้านบน โค้ดนี้มาจากเอกสารของ Bootstrap โดยตรง จุดประสงค์ของส่วนนี้คือไปทบทวน markup ให้แน่ใจว่ามันหมายถึงอะไร

 class="modal fade"

องค์ประกอบ modal หลักถูกเปิดโดยใช้ปุ่มบนหน้าเว็บหลัก ชื่อ class ที่นี่บ่งชี้ว่าเรามี selectors แยกสองตัวสำหรับ modal ของเรา ตัวแรกบ่งชี้สไตล์สำหรับ modal เอง ตัวที่สองบ่งชี้ว่าองค์ประกอบนี้ transition โดยใช้เทคนิค fade-in และ fade-out

 id="exampleModal"

เราเคยเห็นแอตทริบิวต์ id มันคือวิธีที่เราเป้าหมายองค์ประกอบเพื่อเปลี่ยนสไตล์ ในกรณีนี้ มันก็คือเป้าหมายของปุ่มเปิดบนหน้าหลัก มันตรงกับแอตทริบิวต์ "data-target"

 tabindex="-1"

tabindex ปกติบ่งชี้ว่าองค์ประกอบเข้าถึงได้ด้วยคีย์บอร์ด นี่ไม่ใช่กรณีเมื่อตัวเลขเป็นลบ มันจะถูก focus โดยใช้ JavaScript และ/หรือ click event

 aria-labelledby="exampleModalLabel" aria-hidden="true"

aria attributes ตรงไปตรงมาและเกี่ยวกับ accessibility แอตทริบิวต์ aria-labelledby มักเกี่ยวข้องกับ modal-title id แอตทริบิวต์ hidden ค่า true บ่งชี้ว่าไม่ถูกเห็นโดย screen readers

สร้าง Modal Element ของคุณเองด้วย Bootstrap Starter

คุณสามารถใส่สไตล์ของคุณเองเข้าไปใน modal ของ Bootstrap โดยเปลี่ยนแปลงสไตลิง ธรรมชาติแบบคASCADE ของ CSS ยังคงเป็นที่บังคับบัญชา ดังนั้นการ overwrite CSS สามารถทำได้โดยการสร้าง class ใหม่และ attach เข้ากับชื่อ class แยกด้วย space หรือโดยการ overwrite ชื่อ class โดยใช้ keyword important ตัวหลังควรใช้เฉพาะกรณีสุดทาง ส่วนใหญ่เราจะเห็นการเปลี่ยนแปลงด้วย custom class name

<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Bootstrap Modal</title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Link to Bootstrap Stylesheet --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" /> <style> body { max-width: 1400px; width: 100%; padding: 20px; margin: 20px; } .btn-ck { background-color: goldenrod; border: 1px solid black; color: black; } .btn-ck:hover { background-color: rgb(231, 203, 131); border: 1px solid lightgray; } .custom-modal { background: rgb(250, 249, 243); height: 400px; width: 500px; position: fixed; top: center; left: center; } </style> </head> <body> <!--[if lt IE 7]> <p class="browsehappy"> You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience. </p> <![endif]--> <!-- Button triggers modal --> <h1>Modal Example</h1> <button type="button" class="btn btn-primary btn-ck" data-toggle="modal" data-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 custom-modal"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> CareerKarma Demo Modal </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> You are reading a modal with a bit of custom styling... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" > Close </button> <button type="button" class="btn btn-primary btn-ck"> Save changes </button> </div> </div> </div> </div> <!-- The following CDN's go right before the closing body tag. --> <!-- jquery CDN first --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" async defer ></script> <!-- popper.js CDN second --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js" async defer ></script> <!-- bootstrap CDN third --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js" async defer ></script> </body> </html>

ใน code editor ด้านบน เราใช้ CSS เพื่อเปลี่ยนสไตล์ของปุ่มและพื้นหลังของ modal ในตัวอย่างนี้ ฉันเพิ่ม custom class name แทนที่จะพยายาม overwrite CSS ใดๆ ที่ Bootstrap ให้มาแล้วโดยใช้ keyword !important

สรุป

อุปสรรคหลักเมื่อสร้าง modal ด้วย Bootstrap คือการแน่ใจว่าเอกสารถูกอ่านอย่างถูกต้อง ค่อนข้างบ่อยครั้งหากมีข้อผิดพลาด มันมักจะมาจากข้อผิดพลาด copy/paste, ข้อผิดพลาดในตำแหน่งของ CDN หรือ stylesheet ใน head/body ของ HTML ของคุณ หรือว่า CSS ของคุณไม่ได้เป้าหมายองค์ประกอบที่ถูกต้อง

การ custom styling บางส่วนจะมาพร้อมกับ trial and error สิ่งที่ดีคือเอกสารของ Bootstrap เยอะมาก – หากคุณยังไม่เคยเรียน framework หรือ package อื่นก่อนหน้านี้ คุณโชคดีที่เอกสารค่อนข้างดีและเข้าใจง่ายมาก