Dialog

องค์ประกอบกล่องโต้ตอบเป็นองค์ประกอบที่มีประโยชน์สำหรับการแสดงกล่องโต้ตอบประเภทต่างๆ ใน 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

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

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