Modal
Modal là một thành phần giao diện phổ biến, được dùng để hiển thị thông tin hoặc yêu cầu người dùng thực hiện hành động trước khi tiếp tục thao tác trên trang web.
Modal là gì?
Modal là một cửa sổ hoặc hộp thoại bật lên (popup) xuất hiện ở trên giao diện chính, làm mờ hoặc chặn nội dung nền để thu hút sự chú ý. Đặc điểm của modal là người dùng phải tương tác với nó trước khi quay lại nội dung chính.
Modal
Modal thường được dùng để:
- Hiển thị thông báo quan trọng (cảnh báo, xác nhận).
- Thu thập thông tin qua form (đăng nhập, đăng ký, phản hồi).
- Hiển thị nội dung chi tiết mà không cần tải lại trang (xem ảnh, video, thông tin sản phẩm).
Đặc điểm của Modal
- Overlay nền: Làm mờ hoặc khóa phần nền để tập trung sự chú ý vào modal.
- Bắt buộc thao tác: Người dùng phải đóng hoặc hoàn thành hành động trong modal trước khi tiếp tục.
- Kích thước linh hoạt: Có thể là nhỏ (alert), trung bình (form đăng ký), hoặc lớn (gallery, preview).
- Đa dạng nội dung: Chứa văn bản, hình ảnh, video, biểu mẫu hoặc thậm chí cả giao diện con.
Các loại Modal thường gặp
- Alert Modal: Thông báo ngắn gọn, thường chỉ có nút “OK” hoặc “Đóng”.
- Confirmation Modal: Yêu cầu người dùng xác nhận trước khi thực hiện hành động (xóa dữ liệu, thanh toán).
- Form Modal: Chứa biểu mẫu đăng nhập, đăng ký, liên hệ.
- Media Modal: Hiển thị ảnh, video, slideshow trong giao diện nổi bật.
- Custom Modal: Được tùy biến theo nhu cầu, ví dụ: hướng dẫn sử dụng, pop-up khuyến mãi.
Các loại Modal thường gặp
Modal là công cụ giao diện hiệu quả để truyền tải thông tin và thu hút tương tác, nhưng cần được sử dụng hợp lý để đảm bảo trải nghiệm người dùng không bị gián đoạn.
