การจัดรูปแบบโมดัลและกล่องโต้ตอบ

องค์ประกอบ HTML <dialog> มีพฤติกรรมของกล่องโมดัลในตัว ได้แก่ การกักโฟกัส การปิดด้วยปุ่ม Escape และ API showModal() / close() คุณสามารถจัดรูปแบบด้วย CSS แทนการสร้างโครงกล่องโมดัลแบบกำหนดเองตั้งแต่ต้น

องค์ประกอบเสมือน ::backdrop ใช้จัดรูปแบบเลเยอร์ทับด้านหลัง <dialog> ที่เปิดอยู่ ให้ใช้พื้นหลังแบบโปร่งใสบางส่วน: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); } โดยไม่ต้องมี div สำหรับครอบ

จัดกล่องโต้ตอบให้อยู่กึ่งกลางด้วย CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; } การใช้ margin: auto กับกล่องโต้ตอบจะจัดกล่องให้อยู่กึ่งกลางหน้าต่างมุมมองโดยไม่ต้องใช้ JS จัดตำแหน่ง

กำหนด overflow-y: auto ให้ตัวกล่องโต้ตอบเองเพื่อจัดการเนื้อหาที่ยาว เมื่อเปิดกล่องโมดัล ให้กำหนด overflow: hidden ให้กับ body เพื่อป้องกันการเลื่อนพื้นหลัง แล้วเพิ่มและนำคลาสออกด้วย JavaScript เพื่อสลับการทำงานนี้

ทำให้การเปิดกล่องโต้ตอบเคลื่อนไหวด้วย @starting-style (Chrome 117 ขึ้นไป) เพื่อสร้างภาพเคลื่อนไหวตอนเปิดโดยใช้ CSS เท่านั้นและไม่ต้องใช้ JavaScript หากต้องการรองรับได้กว้างขึ้น ให้เพิ่มคลาสเปิดด้วย JavaScript แล้วใช้ transition กับ transform และ opacity โดยเลื่อนขึ้นจาก translateY(20px) ไปเป็น translateY(0)

การทำภาพเคลื่อนไหวตอนปิดกล่องโต้ตอบทำได้ซับซ้อน เพราะกล่องโต้ตอบจะซ่อนทันทีเมื่อเรียก close() วิธีแก้คือใช้ popover API ซึ่งรองรับภาพเคลื่อนไหวตอนปิดในตัว หรือดักการปิดด้วย JavaScript เล่นคลาสภาพเคลื่อนไหวตอนออก แล้วเรียก close() หลังภาพเคลื่อนไหวจบ

กล่องโต้ตอบที่เปิดจะแสดงอยู่เหนือเนื้อหาอื่นทั้งหมดของหน้า หลีกเลี่ยงปัญหาการแย่งลำดับ z-index ด้วยบริบทการซ้อนแบบเนทีฟขององค์ประกอบกล่องโต้ตอบ เพราะองค์ประกอบนี้จะแสดงในชั้นบนสุด เหนือค่าลำดับ z-index ของ CSS ทั้งหมด โดยไม่ต้องกำหนดค่า z-index ให้ตัวกล่องโต้ตอบเอง

บนอุปกรณ์เคลื่อนที่ ให้เลื่อนกล่องโต้ตอบขึ้นจากด้านล่างในลักษณะแผ่นเลื่อน: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; } บนเดสก์ท็อป ให้จัดกล่องไว้กึ่งกลางเป็นโมดัลแบบดั้งเดิมด้วยรูปแบบ margin: auto

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

เพิ่ม aria-labelledby ให้ชี้ไปยังชื่อกล่องโต้ตอบ และเพิ่ม aria-describedby ให้ชี้ไปยังคำอธิบายกล่องโต้ตอบ บทบาทของกล่องโต้ตอบเป็นค่าโดยนัยสำหรับ <dialog> โปรแกรมอ่านหน้าจอจะแจ้งป้ายกำกับเหล่านี้เมื่อโฟกัสเข้าสู่กล่องโต้ตอบ

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

องค์ประกอบกล่องโต้ตอบแบบเนทีฟที่ใช้ร่วมกับ ::backdrop การจัดกึ่งกลางด้วย margin: auto การควบคุมเนื้อหาล้น ภาพเคลื่อนไหวตอนเปิดด้วย CSS และการจัดการโฟกัส จะมอบรูปแบบโมดัลที่เข้าถึงได้อย่างสมบูรณ์และขับเคลื่อนด้วย CSS การจัดวางแบบแผ่นเลื่อนที่ตอบสนองบนอุปกรณ์เคลื่อนที่และแอตทริบิวต์ ARIA ที่เหมาะสมช่วยให้คอมโพเนนต์กล่องโต้ตอบพร้อมใช้งานจริง