องค์ประกอบกล่องโต้ตอบเป็นองค์ประกอบที่มีประโยชน์สำหรับการแสดงกล่องโต้ตอบประเภทต่างๆ ใน 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 จะไม่ปิดกล่องโต้ตอบแบบไม่โมดอล ด้วยเหตุนี้ คุณจึงควรใส่วิธีการปิดกล่องโต้ตอบแบบไม่โมดัลด้วย เพราะหากยิ่งอยู่นอกกล่องโต้ตอบ โฟกัสจะกลับไปที่องค์ประกอบนั้นได้
ที่เปิดกล่องโต้ตอบ ซึ่งอาจไม่ใช่ประสบการณ์ที่ดีที่สุดของผู้ใช้
แม้ว่าข้อกำหนดอย่างเป็นทางการจะไม่บังคับให้มีปุ่มปิดกล่องโต้ตอบ แต่ให้ถือว่าจำเป็นต้องมี ปุ่ม Escape จะปิดกล่องโต้ตอบแบบโมดัล แต่จะไม่เป็นแบบโมดัล ปุ่มที่มองเห็นได้ซึ่งรับโฟกัสได้จะช่วยปรับปรุงการช่วยเหลือพิเศษและ ประสบการณ์ของผู้ใช้
การปิดกล่องโต้ตอบ
คุณไม่จำเป็นต้องใช้เมธอด 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
ทดสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับองค์ประกอบกล่องโต้ตอบ
คุณจัดรูปแบบพื้นที่ด้านหลังกล่องโต้ตอบอย่างไร
::background
background
::backdrop