<>📌 Modal là một UI component hiển thị cửa sổ nổi (overlay) lên trên nội dung chính của ứng dụng hoặc trang web. Nó yêu cầu người dùng tương tác trước khi có thể quay lại nội dung chính.
📌 Ứng dụng của Modals:
✔ Xác nhận hành động quan trọng (Confirm/Delete).
✔ Hiển thị biểu mẫu nhập liệu (Forms, Login, Signup).
✔ Cung cấp thông báo quan trọng.
✔ Hiển thị chi tiết mà không cần tải lại trang.
📌 Khác biệt giữa Modal và Popover:
| Thành phần | Khi nào hiển thị? | Kích thước | Ảnh hưởng đến trang chính | Tương tác được? |
|---|---|---|---|---|
| Modal | Khi click vào nút hoặc trigger | Lớn hơn, có thể full-screen | Chặn thao tác trên trang chính | Có thể có form, nút, văn bản |
| Popover | Khi click hoặc hover vào phần tử | Nhỏ gọn | Không chặn trang chính | Chứa thông tin, ít thao tác |
/Các loại Modals phổ biến
1️⃣ Confirmation Modal – Yêu cầu người dùng xác nhận trước khi thực hiện hành động (xoá, thay đổi cài đặt).
2️⃣ Form Modal – Chứa biểu mẫu để nhập dữ liệu (đăng nhập, đăng ký, đặt hàng).
3️⃣ Notification Modal – Hiển thị thông báo quan trọng (cảnh báo, lỗi, thành công).
4️⃣ Fullscreen Modal – Lớn hơn, chiếm toàn bộ màn hình (thường dùng cho chỉnh sửa nội dung).
5️⃣ Image/Video Modal – Phóng to hình ảnh hoặc video khi nhấp vào.
/Cấu trúc cơ bản của Modal
📌 Một Modal thường có 3 phần chính:
1️⃣ Backdrop (Lớp nền tối) – Làm mờ nội dung chính để tập trung vào Modal.
2️⃣ Modal Container – Hộp chứa nội dung của Modal.
3️⃣ Close Button – Giúp người dùng đóng Modal.
/UX Best Practices cho Modals 🎨
✅ Modal không nên làm gián đoạn quá trình chính
✔ Không nên yêu cầu người dùng quá nhiều xác nhận.
✔ Không sử dụng Modal cho những tác vụ đơn giản có thể hiển thị trực tiếp.
✅ Đảm bảo dễ đóng Modal
✔ Nên có nút “Đóng” rõ ràng.
✔ Người dùng có thể nhấn ra ngoài hoặc nhấn phím Esc để đóng.
✅ Modal nên có kích thước hợp lý
✔ Tránh fullscreen modal trừ khi thật sự cần thiết.
✔ Nội dung modal nên gọn gàng, dễ đọc.
✅ Modal cần hỗ trợ Accessibility (A11Y)
✔ Modal nên có thể mở bằng phím Enter.
✔ Dùng aria-labelledby và aria-describedby để hỗ trợ người khiếm thị.
