ข้อความ

องค์ประกอบกล่องโต้ตอบเป็นองค์ประกอบที่มีประโยชน์สำหรับการแสดงกล่องโต้ตอบทุกประเภทใน HTML ดูวิธีการทำงาน

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

กล่องโต้ตอบอาจเป็นแบบโมดัล (โต้ตอบได้เฉพาะเนื้อหาในกล่องโต้ตอบ) หรือแบบไม่ใช่โมดัล (ยังคงโต้ตอบกับเนื้อหาภายนอกกล่องโต้ตอบได้) กล่องโต้ตอบแบบโมดอลจะแสดงที่ด้านบนของเนื้อหาอื่นๆ ในหน้า ส่วนที่เหลือ ของหน้าเว็บจะเฉื่อย และโดยค่าเริ่มต้นจะถูกบดบังด้วยฉากหลังแบบกึ่งโปร่งใส

องค์ประกอบ HTML ที่สื่อความหมาย <dialog> เพื่อสร้างกล่องโต้ตอบ มาพร้อมกับความหมาย การโต้ตอบด้วยแป้นพิมพ์ รวมถึงคุณสมบัติและเมธอดทั้งหมดของอินเทอร์เฟซ HTMLDialogElement

กล่องโต้ตอบโมดัล

ตัวอย่างของโมดอล <dialog> มีดังนี้ เปิดกล่องโต้ตอบด้วยปุ่ม "เปิดกล่องโต้ตอบแบบโมดอล" เมื่อเปิดแล้ว คุณจะปิดกล่องโต้ตอบได้ 3 วิธี ได้แก่ กดปุ่ม Escape, ส่งแบบฟอร์มด้วยปุ่มที่มี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() เท่านั้น องค์ประกอบเสมือนนี้ จะตรงกับฉากหลังทั้งหมด รวมถึงฉากหลังที่แสดงเมื่อใช้ 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 ไม่ได้รับการสืบทอด

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับองค์ประกอบกล่องโต้ตอบ