<dialog>: องค์ประกอบกล่องโต้ตอบ
- มีมาให้ในตัว: องค์ประกอบ
<dialog> ใช้แทนองค์ประกอบแบบโต้ตอบ เช่น กล่องโต้ตอบแบบโมดัลหรือไม่ใช่โมดัล การแจ้งเตือน ตัวตรวจสอบ และหน้าต่างย่อย เป็นต้น โดยสามารถใช้งานได้ในเบราว์เซอร์ส่วนใหญ่มาตั้งแต่เดือนมีนาคม 2022
แอตทริบิวต์
open: ระบุว่ากล่องโต้ตอบกำลังทำงานอยู่และสามารถโต้ตอบได้ หากไม่ได้ตั้งค่าแอตทริบิวต์ open ผู้ใช้จะมองไม่เห็นกล่องโต้ตอบ แนะนำให้ใช้เมธอด .show() หรือ .showModal()
หมายเหตุการใช้งาน
- องค์ประกอบ HTML
<form> สามารถใช้แอตทริบิวต์ method="dialog" เพื่อปิดกล่องโต้ตอบได้
- สามารถใช้ pseudo-element
::backdrop ของ CSS เพื่อกำหนดสไตล์พื้นหลังของกล่องโต้ตอบแบบโมดัลได้
- ควรเพิ่มแอตทริบิวต์
autofocus ให้กับองค์ประกอบที่ต้องการให้โต้ตอบได้ทันทีเมื่อกล่องโต้ตอบเปิดขึ้น
- ควรระวังไม่เพิ่มแอตทริบิวต์
tabindex ให้กับองค์ประกอบ <dialog>
การช่วยการเข้าถึง
- เมื่อนำกล่องโต้ตอบไปใช้งาน การตั้งค่าโฟกัสของผู้ใช้อย่างเหมาะสมเป็นสิ่งสำคัญ
- เมื่อเปิดกล่องโต้ตอบด้วยเมธอด
showModal() โฟกัสจะถูกตั้งไปยังองค์ประกอบแรกที่สามารถรับโฟกัสได้
- วิธีที่แน่นอนที่สุดคือใส่ปุ่มสำหรับปิดอย่างชัดเจน เพื่อให้ผู้ใช้ทุกคนสามารถปิดกล่องโต้ตอบได้
ตัวอย่าง
กล่องโต้ตอบด้วย HTML อย่างเดียว
- ตัวอย่างการสร้างกล่องโต้ตอบแบบไม่ใช่โมดัลด้วย HTML เพียงอย่างเดียว โดยกล่องโต้ตอบจะเปิดอยู่ตั้งแต่หน้าโหลดเพราะมีแอตทริบิวต์
open
การสร้างกล่องโต้ตอบแบบโมดัล
- ตัวอย่างการเปิดกล่องโต้ตอบแบบโมดัลด้วยเมธอด
.showModal() สามารถปิดได้ด้วยปุ่ม Esc หรือปุ่ม "Close" ภายในกล่องโต้ตอบ
การจัดการค่าที่ส่งกลับของกล่องโต้ตอบ
- ตัวอย่างการใช้
returnValue ขององค์ประกอบ <dialog> โดยสามารถใช้ฟอร์มเพื่อปิดกล่องโต้ตอบแบบโมดัลได้
การปิดกล่องโต้ตอบที่มีช่องกรอกฟอร์มบังคับ
- เมื่อฟอร์มภายในกล่องโต้ตอบมีช่องกรอกที่จำเป็น สามารถปิดได้ด้วยแอตทริบิวต์
formnovalidate
แอนิเมชันของกล่องโต้ตอบ
- สามารถทำแอนิเมชันให้กล่องโต้ตอบได้โดยทำให้แอตทริบิวต์
display ขององค์ประกอบ <dialog> เคลื่อนไหว
สรุปทางเทคนิค
- หมวดหมู่เนื้อหา: Flow content, sectioning root
- เนื้อหาที่อนุญาต: Flow content
- บทบาท ARIA โดยนัย: dialog
- DOM interface:
HTMLDialogElement
สเปก
- มาตรฐาน HTML # the-dialog-element
ความเข้ากันได้ของเบราว์เซอร์
- เบราว์เซอร์หลักส่วนใหญ่รองรับองค์ประกอบ
<dialog> และแอตทริบิวต์ open อย่างสมบูรณ์
ดูเพิ่มเติม
- อินเทอร์เฟซ
HTMLDialogElement
- อีเวนต์
close และ cancel ของ HTMLDialogElement
- แอตทริบิวต์
open ของ HTMLDialogElement
- แอตทริบิวต์ส่วนกลาง
inert ขององค์ประกอบ HTML
- pseudo-element
::backdrop ของ CSS
ยังไม่มีความคิดเห็น