Hộp thoại đóng nút điều khiển nền tảng

Tính năng web: <dialog closedby>

Khi một hộp thoại phụ được mở, người dùng muốn sử dụng các nút điều khiển quen thuộc để đóng hộp thoại đó: nhấn phím Esc trên bàn phím, sử dụng nút quay lại hoặc cử chỉ trên nền tảng di động hoặc cử chỉ đóng bằng công nghệ hỗ trợ.

Khi phần tử <dialog> được ra mắt lần đầu, bạn có thể đóng phần tử này bằng phím Esc, nhưng không thể đóng bằng các chế độ điều khiển khác của nền tảng, chẳng hạn như nút quay lại/cử chỉ quay lại trên thiết bị di động. Khi thêm thuộc tính closedby cho các phần tử <dialog>, hành vi mở rộng của việc phản hồi các chế độ điều khiển dành riêng cho nền tảng khác đối với các yêu cầu đóng đã được áp dụng cho các phần tử <dialog> được mở ở trạng thái phương thức (tức là khi được mở bắt buộc bằng phương thức showModal() của phần tử <dialog> trong JavaScript hoặc được mở theo cách khai báo bằng lệnh gọi show-modal). Vì vậy, nhà phát triển không cần thực hiện thay đổi cụ thể nào nếu đã sử dụng phần tử <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>

Khi được mở ở trạng thái phương thức, một hộp thoại không có thuộc tính closedby sẽ phản hồi các yêu cầu đóng giống như việc đặt rõ ràng thuộc tính closedby thành 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>

Nếu cũng muốn có hành vi "loại bỏ nhẹ", thì bạn phải đặt closedby thành 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>

Chiến lược dự phòng

Bạn có thể đóng các phần tử <dialog> được mở ở trạng thái phương thức bằng phím Esc, vì vậy, bạn không cần phải có phương án dự phòng. Không có cách nào hiệu quả để triển khai yêu cầu đóng từ nút/cử chỉ quay lại trên thiết bị di động, vì vậy, bạn nên áp dụng tính năng này dưới dạng một tính năng nâng cao tăng dần, đặc biệt là khi có các phương tiện khác để đóng hộp thoại phụ trợ. Tương tự, hành vi đóng nhanh cho phần tử <dialog> bằng closedby="any" có thể được coi là một cải tiến tăng dần.