thành phần hộp thoại – các phương thức thực hiện dễ dàng

Chrome Canary đã hỗ trợ phần tử hộp thoại phía sau cờ. Bạn có thể sử dụng phần tử dialog cho cửa sổ bật lên trong trang web.

  • show(): Mở hộp thoại.
  • close(): Đóng hộp thoại. Sử dụng một đối số không bắt buộc mà nếu bạn đặt dialog.returnValue là hiện tại.
  • showModal(): Mở hộp thoại phương thức.
  • ::backdrop: Phần tử giả để tạo kiểu cho nền phía sau hộp thoại phương thức.
  • Sự kiện close: Kích hoạt khi hộp thoại đóng.

Cập nhật ngày 16 tháng 12 năm 2013

Phần tử dialog hiện hỗ trợ:

  • Sự kiện cancel: Được kích hoạt khi người dùng nhấn phím Escape trên hộp thoại phương thức. Bạn có thể huỷ sự kiện này bằng event.preventDefault().
  • Thuộc tính autofocus: Thành phần điều khiển biểu mẫu đầu tiên trong hộp thoại phương thức có thuộc tính autofocus (nếu có) sẽ được lấy tiêu điểm khi hộp thoại hiển thị. Nếu không có phần tử nào như vậy, thì phần tử có thể lấy tiêu điểm đầu tiên sẽ được lấy làm tiêu điểm.
  • form[method="dialog"]: Chỉ hợp lệ trong một hộp thoại. Khi gửi biểu mẫu, tính năng này sẽ đóng hộp thoại và đặt dialog.returnValue thành giá trị của nút gửi đã được sử dụng.

Xem thông tin chi tiết qua bản minh hoạ trực tiếp và đoạn mã polyfill.

Để bật tính năng này, hãy bật chế độ "Bật các tính năng thử nghiệm của Nền tảng web" trong chrome://flags/.