เอลิเมนต์กล่องโต้ตอบเป็นองค์ประกอบที่มีประโยชน์ในการนำเสนอกล่องโต้ตอบทุกประเภทใน HTML ดูวิธีการทํางาน
กล่องโต้ตอบแบบโมดัลคือกล่องป๊อปอัปประเภทพิเศษในหน้าเว็บ ซึ่งเป็นป๊อปอัปที่ขัดจังหวะผู้ใช้ให้มุ่งความสนใจไปที่ตัวเอง มีกรณีการใช้งานที่ถูกต้องสำหรับการเปิดกล่องโต้ตอบบางกรณี แต่ควรพิจารณาอย่างรอบคอบก่อนดำเนินการ กล่องโต้ตอบแบบโมดัลจะบังคับให้ผู้ใช้มุ่งเน้นที่เนื้อหาที่เฉพาะเจาะจง และละเว้นส่วนที่เหลือของหน้าอย่างน้อยเป็นการชั่วคราว
กล่องโต้ตอบอาจเป็นแบบโมดัล (โต้ตอบได้เฉพาะกับเนื้อหาในกล่องโต้ตอบ) หรือแบบไม่โมดัล (ยังคงโต้ตอบกับเนื้อหานอกกล่องโต้ตอบได้) กล่องโต้ตอบแบบโมดัลจะแสดงอยู่ด้านบนเนื้อหาส่วนที่เหลือของหน้า ส่วนที่เหลือของหน้าไม่มีการทำงานและถูกบดบังโดยพื้นหลังแบบโปร่งแสงบางส่วนโดยค่าเริ่มต้น
องค์ประกอบ HTML ที่สื่อความหมาย <dialog>
เพื่อสร้างกล่องโต้ตอบจะมาพร้อมกับความหมาย การโต้ตอบด้วยแป้นพิมพ์ รวมถึงพร็อพเพอร์ตี้และเมธอดทั้งหมดของอินเทอร์เฟซ HTMLDialogElement
กล่องโต้ตอบแบบโมดัล
ต่อไปนี้คือตัวอย่างของ <dialog>
แบบโมดอล เปิดกล่องโต้ตอบด้วยปุ่ม "เปิดกล่องโต้ตอบแบบโมดัล" เมื่อเปิดแล้ว คุณจะปิดกล่องโต้ตอบได้ 3 วิธี ได้แก่ ปุ่ม Esc, การส่งแบบฟอร์มที่มีปุ่มซึ่งตั้งค่า formmethod="dialog"
(หรือหากแบบฟอร์มเองตั้งค่า method="dialog"
ไว้) และเมธอด HTMLDialogElement.close()
HTMLDialogElement
มีเมธอดหลัก 3 รายการ พร้อมด้วยเมธอดทั้งหมดที่รับค่ามาจาก HTMLElement
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
เนื่องจาก <dialog>
นี้เปิดผ่านเมธอด HTMLDialogElement.showModal()
จึงถือเป็นกล่องโต้ตอบแบบโมดอล การเปิดกล่องโต้ตอบแบบโมดัลจะปิดใช้งานและบดบังทุกอย่างยกเว้นกล่องโต้ตอบนั้น หากคุณวางเมาส์เหนือ UI นอกกล่องโต้ตอบ คุณจะเห็นว่าองค์ประกอบทั้งหมดทํางานราวกับมีการตั้งค่า pointer-events: none;
แม้แต่ปุ่มที่เปิดกล่องโต้ตอบก็ไม่ตอบสนองต่อการโต้ตอบ
เมื่อเปิดกล่องโต้ตอบ โฟกัสจะย้ายไปยังกล่องโต้ตอบ ระบบจะตั้งค่าโฟกัสที่องค์ประกอบแรกตามลําดับการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ภายในกล่องโต้ตอบนั้น
หากกดแป้น tab
ซ้ำๆ คุณจะเห็นว่ามีเพียงเนื้อหาภายในกล่องโต้ตอบเท่านั้นที่จะได้รับโฟกัสขณะที่กล่องโต้ตอบแบบโมดัลเปิดอยู่ ทุกอย่างที่อยู่นอกกล่องโต้ตอบแบบโมดัลจะหยุดทำงานตราบใดที่กล่องโต้ตอบยังเปิดอยู่
เมื่อปิดกล่องโต้ตอบ ไม่ว่าจะเป็นแบบโมดัลหรือไม่ โฟกัสจะกลับไปที่องค์ประกอบที่เปิดกล่องโต้ตอบ หากคุณเปิดกล่องโต้ตอบแบบเป็นโปรแกรมซึ่งไม่ได้อิงตามการดําเนินการของผู้ใช้ ให้พิจารณาใหม่ หากจำเป็น ให้ตรวจสอบว่าได้คืนโฟกัสกลับไปยังตำแหน่งเดิมก่อนที่จะเปิดกล่องโต้ตอบ โดยเฉพาะในกรณีที่ผู้ใช้ปิดกล่องโต้ตอบโดยไม่โต้ตอบกับกล่องโต้ตอบ
มีแอตทริบิวต์ inert
ระดับที่สามารถใช้เพื่อปิดใช้องค์ประกอบและองค์ประกอบย่อยทั้งหมดขององค์ประกอบนั้น ยกเว้นกล่องโต้ตอบที่ใช้งานอยู่ เมื่อเปิดกล่องโต้ตอบแบบโมดัลโดยใช้ showModal()
ระบบจะเปิดใช้สถานะไม่มีการใช้งานหรือปิดใช้งานโดยอัตโนมัติโดยไม่ต้องตั้งค่าแอตทริบิวต์อย่างชัดเจน
พื้นหลังที่บดบังทุกอย่างยกเว้นกล่องโต้ตอบสามารถจัดสไตล์ได้โดยใช้องค์ประกอบจำลอง ::backdrop
ฉากหลังจะแสดงก็ต่อเมื่อ <dialog>
แสดงพร้อมกับเมธอด .showModal()
องค์ประกอบเสมือนนี้ตรงกับพื้นหลังทั้งหมด รวมถึงพื้นหลังที่แสดงเมื่อใช้ FullScreen API เช่น เมื่อดูวิดีโอในโหมดเต็มหน้าจอซึ่งไม่ได้มีส่วนสัดส่วนเดียวกับหน้าจอหรือจอภาพ
กล่องโต้ตอบแบบไม่โมดัล
HTMLDialogElement.show()
จะเปิดกล่องโต้ตอบในลักษณะเดียวกัน แต่จะไม่เพิ่มฉากหลังหรือทำให้สิ่งใดก็ตามไม่มีการเคลื่อนไหว
ปุ่ม Escape จะไม่ปิดกล่องโต้ตอบแบบไม่โมดอล ด้วยเหตุนี้ คุณจึงควรตรวจสอบว่าได้ระบุวิธีการปิดกล่องโต้ตอบแบบไม่โมดอลไว้ด้วย เมื่อดำเนินการดังกล่าว หากตัวปิดอยู่นอกกล่องโต้ตอบ โปรดทราบว่าโฟกัสจะไปที่องค์ประกอบที่เปิดกล่องโต้ตอบ ซึ่งอาจไม่ใช่ประสบการณ์การใช้งานที่ดีที่สุด
แม้ว่าข้อกำหนดอย่างเป็นทางการจะไม่บังคับให้มีปุ่มปิดกล่องโต้ตอบ แต่ให้ถือว่าจำเป็นต้องมี ปุ่ม Esc จะปิดกล่องโต้ตอบแบบโมดัล แต่ไม่ปิดกล่องโต้ตอบแบบไม่โมดัล ปุ่มที่มองเห็นได้ซึ่งรับโฟกัสได้จะช่วยปรับปรุงการช่วยเหลือพิเศษและประสบการณ์ของผู้ใช้
การปิดกล่องโต้ตอบ
คุณไม่จำเป็นต้องใช้เมธอด HTMLDialogElement.close()
เพื่อปิดกล่องโต้ตอบ คุณไม่จำเป็นต้องใช้ JavaScript เลย หากต้องการปิด <dialog>
โดยไม่ใช้ JavaScript ให้ใส่แบบฟอร์มที่มีเมธอดกล่องโต้ตอบโดยตั้งค่า method="dialog"
ใน <form>
หรือ formmethod="dialog"
บนปุ่ม
เมื่อผู้ใช้ส่งผ่านเมธอด dialog
ระบบจะรักษาสถานะของข้อมูลที่ผู้ใช้ป้อนไว้ เมื่อมีเหตุการณ์การส่ง ฟอร์มจะผ่านการตรวจสอบข้อจำกัด (เว้นแต่จะมีการตั้งค่า novalidate
) ข้อมูลผู้ใช้จะไม่ได้รับการล้างหรือส่ง
ปุ่มปิดที่ไม่มี JavaScript จะเขียนได้ดังนี้
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
คุณอาจสังเกตเห็นแอตทริบิวต์ autofocus
ที่กําหนดไว้บนปุ่มปิด <button>
ในตัวอย่างนี้ องค์ประกอบที่มีการตั้งค่าแอตทริบิวต์ autofocus
ภายใน <dialog>
จะไม่ได้รับการโฟกัสเมื่อโหลดหน้าเว็บ (เว้นแต่ว่าหน้าเว็บจะโหลดโดยที่กล่องโต้ตอบแสดงอยู่) แต่จะได้รับโฟกัสเมื่อเปิดกล่องโต้ตอบ
โดยค่าเริ่มต้น เมื่อเปิดกล่องโต้ตอบ องค์ประกอบที่โฟกัสได้รายการแรกภายในกล่องโต้ตอบจะได้รับโฟกัส เว้นแต่ว่าองค์ประกอบอื่นภายในกล่องโต้ตอบจะมีการตั้งค่าแอตทริบิวต์ autofocus
การตั้งค่าแอตทริบิวต์ autofocus
ในปุ่มปิดจะช่วยให้ปุ่มดังกล่าวได้รับโฟกัสเมื่อเปิดกล่องโต้ตอบ แต่ควรพิจารณาอย่างรอบคอบก่อนหากต้องการใส่ autofocus
ใน <dialog>
ระบบจะข้ามองค์ประกอบทั้งหมดในลําดับที่อยู่ก่อนองค์ประกอบที่โฟกัสอัตโนมัติ
เราจะพูดถึงแอตทริบิวต์นี้เพิ่มเติมในบทเรียนเกี่ยวกับโฟกัส
อินเทอร์เฟซ HTMLDialogElement
มีพร็อพเพอร์ตี้ returnValue
การส่งแบบฟอร์มที่มี method="dialog"
จะตั้งค่า returnValue
เป็น name
(หากมี) ของปุ่มส่งที่ใช้ส่งแบบฟอร์ม หากเราเขียน <button type="submit" name="toasty">close</button>
returnValue
จะเป็น toasty
เมื่อเปิดกล่องโต้ตอบ แอตทริบิวต์บูลีน open
จะปรากฏขึ้น ซึ่งหมายความว่ากล่องโต้ตอบทำงานอยู่และสามารถโต้ตอบได้ เมื่อเปิดกล่องโต้ตอบโดยการเพิ่มแอตทริบิวต์ open
แทนที่จะเปิดผ่าน .show()
หรือ .showModal()
กล่องโต้ตอบจะไม่เป็นแบบโมดอล พร็อพเพอร์ตี้ HTMLDialogElement.open
จะแสดงผลเป็น true
หรือ false
โดยขึ้นอยู่กับว่ากล่องโต้ตอบพร้อมให้โต้ตอบหรือไม่ ไม่ใช่ว่าเป็นแบบโมดอลหรือไม่
แม้ว่า JavaScript จะเป็นวิธีที่แนะนำในการเปิดกล่องโต้ตอบ แต่การใส่แอตทริบิวต์ open
เมื่อโหลดหน้าเว็บ แล้วนำออกด้วย .close()
จะช่วยให้มั่นใจได้ว่ากล่องโต้ตอบจะใช้งานได้แม้ว่า JavaScript จะไม่พร้อมใช้งาน
รายละเอียดเพิ่มเติม
อย่าใช้ tabindex
องค์ประกอบที่เปิดใช้งานเพื่อเปิดกล่องโต้ตอบและปุ่มปิดที่อยู่ในกล่องโต้ตอบ (และเนื้อหาอื่นๆ ที่เกี่ยวข้อง) จะได้รับโฟกัสและเป็นแบบอินเทอร์แอกทีฟ องค์ประกอบ <dialog>
ไม่ได้โต้ตอบและไม่ได้รับโฟกัส อย่าเพิ่มพร็อพเพอร์ตี้ tabindex
ลงในกล่องโต้ตอบ
บทบาท ARIA
บทบาทโดยนัยคือ dialog
หากกล่องโต้ตอบเป็นหน้าต่างยืนยันที่สื่อสารข้อความสําคัญซึ่งต้องมีการยืนยันหรือการตอบกลับอื่นๆ จากผู้ใช้ ให้ตั้งค่าเป็น role="alertdialog"
กล่องโต้ตอบควรมีชื่อสำหรับการช่วยเหลือพิเศษด้วย หากข้อความที่มองเห็นได้ระบุชื่อที่เข้าถึงได้ ให้เพิ่ม aria-labelledby="idOfLabelingText"
ค่าเริ่มต้นของ CSS
โปรดทราบว่าเบราว์เซอร์มีการจัดรูปแบบเริ่มต้นสําหรับ dialog
Firefox, Chrome และ Edge ตั้งค่า color: CanvasText;
background-color: Canvas;
ส่วน Safari ตั้งค่า color: black; background-color: white;
ในสไตล์ชีต user-agent color
ได้รับการรับค่าจาก dialog
ไม่ใช่จาก body
หรือ :root
ซึ่งอาจเป็นสิ่งที่ไม่คาดคิด พร็อพเพอร์ตี้ background-color
ไม่ได้รับค่ามา
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับองค์ประกอบกล่องโต้ตอบ
คุณจัดสไตล์พื้นที่ด้านหลังกล่องโต้ตอบอย่างไร
::backdrop
::background
background