`<dialog>`: phần tử hộp thoại

<dialog>: phần tử hộp thoại

• Tích hợp sẵn: Phần tử <dialog> biểu thị các phần tử tương tác như hộp thoại modal hoặc không modal, cảnh báo, inspector, cửa sổ con, v.v. Có thể sử dụng trên hầu hết các trình duyệt kể từ tháng 3 năm 2022.

Thuộc tính

• open: Cho biết hộp thoại đang hoạt động và có thể tương tác. Nếu thuộc tính open không được đặt, nó sẽ không hiển thị với người dùng. Khuyến nghị dùng các phương thức .show() hoặc .showModal().

Ghi chú sử dụng

• Phần tử HTML <form> có thể đóng hộp thoại bằng thuộc tính method="dialog".
• Có thể dùng pseudo-element CSS ::backdrop để tạo kiểu nền của hộp thoại modal.
• Thuộc tính autofocus nên được thêm vào phần tử sẽ được tương tác ngay khi hộp thoại mở ra.
• Cần lưu ý không thêm thuộc tính tabindex vào phần tử <dialog>.

Trợ năng

• Khi triển khai hộp thoại, việc thiết lập focus cho người dùng một cách phù hợp là rất quan trọng.
• Khi mở hộp thoại bằng phương thức showModal(), focus sẽ được đặt vào phần tử đầu tiên có thể nhận focus.
• Cách chắc chắn nhất là thêm một nút rõ ràng để mọi người dùng đều có thể đóng hộp thoại.

Ví dụ

Hộp thoại chỉ dùng HTML

• Ví dụ tạo hộp thoại không modal chỉ bằng HTML. Do có thuộc tính open, hộp thoại sẽ mở khi trang được tải.

Tạo hộp thoại modal

• Ví dụ mở hộp thoại modal bằng phương thức .showModal(). Có thể đóng bằng phím Esc hoặc nút "Close" trong hộp thoại.

Xử lý giá trị trả về của hộp thoại

• Ví dụ sử dụng returnValue của phần tử <dialog>. Có thể dùng form để đóng hộp thoại modal.

Đóng hộp thoại có trường nhập form bắt buộc

• Khi form bên trong hộp thoại có trường bắt buộc, có thể đóng bằng thuộc tính formnovalidate.

Hiệu ứng động cho hộp thoại

• Có thể tạo hiệu ứng động cho hộp thoại bằng cách animate thuộc tính display của phần tử <dialog>.

Tóm tắt kỹ thuật

• Danh mục nội dung: Flow content, sectioning root
• Nội dung được phép: Flow content
• Vai trò ARIA ngầm định: dialog
• Giao diện DOM: HTMLDialogElement

Đặc tả

• HTML Standard # the-dialog-element

Tương thích trình duyệt

• Phần tử <dialog> và thuộc tính open được hỗ trợ đầy đủ trên hầu hết các trình duyệt chính.

Tham khảo

• Giao diện HTMLDialogElement
• Sự kiện close và cancel của HTMLDialogElement
• Thuộc tính open của HTMLDialogElement
• Thuộc tính toàn cục inert của phần tử HTML
• Pseudo-element CSS ::backdrop