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 sau một 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. Lấy một đối số không bắt buộc mà nếu có dialog.returnValue thì được đặt thành.
  • showModal(): Mở hộp thoại cửa sổ phụ.
  • ::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: Được kích hoạt khi đóng hộp thoại.

Nội dung cập nhật vào ngày 16 tháng 12 năm 2013

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

  • Sự kiện cancel: 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 làm tâm điểm khi hộp thoại hiện lên. Nếu không có phần tử nào như vậy, thì phần tử có thể làm tâm điểm đầu tiên sẽ được lấy làm tâm điểm.
  • form[method="dialog"]: Chỉ hợp lệ trong hộp thoại. Sau khi gửi biểu mẫu, hệ thống sẽ đóng hộp thoại và đặt dialog.returnValue thành giá trị của nút gửi đã dùng.

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

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