กล่องโต้ตอบปิดการควบคุมแพลตฟอร์ม

เมื่อกล่องโต้ตอบโมดัลเปิดอยู่ ผู้ใช้คาดหวังว่าจะใช้การควบคุมที่คุ้นเคยเพื่อปิดกล่องโต้ตอบ เช่น การกดแป้น Esc บนแป้นพิมพ์ การใช้ปุ่มย้อนกลับหรือท่าทางสัมผัสบนแพลตฟอร์มอุปกรณ์เคลื่อนที่ หรือท่าทางสัมผัสเพื่อปิดด้วยเทคโนโลยีความช่วยเหลือพิเศษ

เมื่อเปิดตัวองค์ประกอบ <dialog> เป็นครั้งแรก ผู้ใช้สามารถปิดองค์ประกอบนี้ได้ด้วยปุ่ม Esc แต่ไม่สามารถใช้การควบคุมอื่นๆ ของแพลตฟอร์ม เช่น ปุ่มย้อนกลับ/ท่าทางสัมผัสบนอุปกรณ์เคลื่อนที่ เมื่อเพิ่มแอตทริบิวต์ closedby สำหรับองค์ประกอบ <dialog> ระบบจะใช้ลักษณะการทำงานเพิ่มเติมในการตอบสนองต่อการควบคุมที่เจาะจงแพลตฟอร์มมากขึ้นสำหรับคำขอปิดกับองค์ประกอบ <dialog> ที่เปิดในสถานะโมดัล (เช่น เมื่อเปิดโดยใช้คำสั่งด้วยเมธอด showModal() ขององค์ประกอบ <dialog> ใน JavaScript หรือเปิดโดยใช้คำสั่งด้วยคำสั่ง show-modal invoker) ดังนั้น นักพัฒนาแอปจึงไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ หากใช้องค์ประกอบ <dialog> อยู่แล้ว

<!-- MANDATORY: must be opened with either `showModal()` with JavaScript or the `show-modal` command using declarative command invokers in order respond to close requests including platform-specific controls. -->
<dialog aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests.</p>
</dialog>

เมื่อเปิดในสถานะโมดัล กล่องโต้ตอบที่ไม่มีแอตทริบิวต์ closedby จะตอบสนองต่อคำขอปิดเช่นเดียวกับการตั้งค่าแอตทริบิวต์ closedby เป็น closerequest อย่างชัดแจ้ง

<!-- This is unnecessary as it is the default behavior for modal dialogs -->
<dialog closedby="closerequest" aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests.</p>
</dialog>

หากต้องการให้มีลักษณะการทำงานแบบ "ปิดเมื่อแตะนอกหน้าต่าง" ด้วย คุณต้องตั้งค่า closedby เป็น any ดังนี้

<dialog closedby="any" aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests and light dismiss.</p>
</dialog>

กลยุทธ์สำรอง

องค์ประกอบ <dialog> ที่เปิดในสถานะโมดัลสามารถปิดได้ด้วย Esc อยู่แล้ว จึงไม่จำเป็นต้องมีทางเลือกอื่น ไม่มีวิธีที่ดีในการใช้คำขอปิดจากปุ่มย้อนกลับ/ท่าทางสัมผัสบนอุปกรณ์เคลื่อนที่ ดังนั้นจึงควรใช้ฟีเจอร์นี้เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง โดยเฉพาะอย่างยิ่งเมื่อมีวิธีอื่นๆ ที่ไม่แบ่งแยกในการปิดกล่องโต้ตอบโมดัล ในทำนองเดียวกัน ลักษณะการปิดเมื่อคลิกนอกองค์ประกอบสำหรับองค์ประกอบ <dialog> ที่ใช้ closedby="any" ถือเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่องได้