เจาะลึกการใช้งานและตกแต่ง HTML Dialog Element แบบมือโปร
สรุปเทคนิคการจัดการแท็ก dialog ตั้งแต่การเปิด-ปิด เมธอด showModal พื้นหลัง backdrop ไปจนถึงการแอนิเมชัน
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- ใช้เมธอด showModal() เพื่อเปิด dialog ในแบบโมดอลแท้จริงพร้อมแบ็คดรอป
- จัดการปิดหน้าต่างได้ง่ายๆ ผ่านปุ่มภายในแท็กฟอร์มหรือกดปุ่ม Esc
- ปรับแต่งพื้นหลังด้วย ::backdrop พร้อมเพิ่มเอฟเฟกต์เบลอเพื่อความสวยงาม
- ป้องกันไม่ให้เนื้อหาเบื้องหลังเลื่อนด้วย CSS สไตล์ body:has(dialog[open])
การใช้งานแท็ก HTML
เมื่อเรียกใช้เมธอด show() สังเกตว่ามันจะขาดองค์ประกอบสำคัญอย่างแบ็คดรอป การจัดวางตำแหน่ง และระบบปิดอัตโนมัติ ดังนั้นการเลือกใช้เมธอด showModal() จึงตอบโจทย์มากกว่าเพราะจะสร้างชั้นบนสุดและบล็อกการโต้ตอบกับเนื้อหาด้านหลัง
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
การเข้าใจความแตกต่างระหว่าง show() และ showModal() เป็นหัวใจสำคัญในการพัฒนาเว็บ เพราะแบบแรกทำหน้าที่คล้ายป๊อปอัปแจ้งเตือนทั่วไป (Popover) ในขณะที่แบบหลังคือโมดอลแท้ๆ ที่ดึงดูดความสนใจของผู้ใช้และดักจับโฟกัส (Focus Trap) ซึ่งช่วยเรื่องการเข้าถึง (Accessibility) ได้เป็นอย่างดี
ในส่วนของการปิดไดอะล็อก ผู้ใช้สามารถกดปุ่ม Esc เมื่อไดอะล็อกอยู่ในสถานะโฟกัสได้ทันที หรือถ้าต้องการสร้างองค์ประกอบ UI เช่น ปุ่มปิด ก็สามารถใส่ไว้ภายในแท็กไดอะล็อกได้เลย หรือจะเลือกใช้วิธีแบบไม่พึ่งพา JavaScript โดยเขียนประกาศตรงๆ ใน HTML ก็สามารถทำได้เช่นกัน
สำหรับการตกแต่งหน้าตา ดีเวลลอปเปอร์สามารถปรับแต่งส่วนแบ็คดรอปได้ผ่าน pseudo-element ที่ชื่อว่า ::backdrop เช่น การใส่สีทึบ หรือเพิ่มความโปร่งใสพร้อมใส่ลูกเล่น blur() เข้าไปเพื่อให้ผู้ใช้ยังคงมองเห็นบริบทของหน้าเว็บเบื้องหลังได้รางๆ
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น