Toast notification là gì?
Toast notification là dạng thông báo tạm thời, xuất hiện trong thời gian ngắn rồi tự biến mất mà không chặn luồng thao tác của người dùng. Khác với modal hoặc alert cổ điển, toast không buộc người dùng phải tương tác mà chỉ đóng vai trò cung cấp phản hồi nhanh cho hành động vừa thực hiện.
Một toast notification tốt thường có các đặc điểm:
- Xuất hiện ở vị trí cố định (thường là góc dưới hoặc góc trên màn hình).
- Có thời gian tồn tại rõ ràng, tự động ẩn sau vài giây.
- Phân loại theo trạng thái: thành công, lỗi, cảnh báo, thông tin.
- Có thể đóng thủ công bằng nút đóng nhỏ nếu cần.
Thiết kế cấu trúc và luồng hoạt động
Để Mini Toast Notification System hoạt động rõ ràng và dễ bảo trì, có thể định nghĩa luồng cơ bản như sau:
- Trong HTML, tạo sẵn một vùng container giữ các toast đang hiển thị.
- Trong JavaScript, xây dựng một hàm
showToast(message, type)để tạo và thêm toast mới. - Mỗi toast có thời gian sống (timeout), sau khoảng thời gian này sẽ tự xóa.
- Người dùng có thể nhấn vào nút đóng để xóa toast ngay lập tức.
Cách tiếp cận này giúp hệ thống toast gọn, dễ dùng lại ở nhiều nơi trong mã nguồn.
Cấu trúc HTML cho vùng toast container
Trong HTML, chỉ cần một container duy nhất để đặt tất cả các toast. Container này thường được đặt ở gần cuối trang và sử dụng vị trí cố định để luôn hiển thị trên góc màn hình.
<div id="toast-container" class="toast-container">
<!-- Các toast sẽ được JavaScript thêm vào đây -->
</div>
Phần nội dung của mỗi toast sẽ được tạo bằng JavaScript dưới dạng một thẻ div con của container này.
Định nghĩa dạng toast trong CSS
CSS sẽ quyết định vị trí, kiểu chữ, màu nền và hiệu ứng xuất hiện của toast. Ví dụ dưới đây minh họa một thiết kế toast đơn giản, hỗ trợ bốn loại trạng thái: mặc định, success, error và warning.
.toast-container {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
}
.toast {
min-width: 240px;
max-width: 320px;
padding: 8px 12px;
border-radius: 4px;
background: #111827;
color: #f9fafb;
font-size: 13px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.4);
opacity: 0;
transform: translateY(8px);
animation: toast-in 200ms ease-out forwards;
}
.toast__message {
margin-right: 8px;
}
.toast__close {
border: none;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 14px;
}
/* Biến thể theo loại thông báo */
.toast--success {
background: #16a34a;
}
.toast--error {
background: #dc2626;
}
.toast--warning {
background: #f97316;
}
@keyframes toast-in {
to {
opacity: 1;
transform: translateY(0);
}
}
Mỗi toast được thiết kế như một khối nhỏ, bo góc, có bóng đổ và animation xuất hiện nhẹ từ dưới lên để tạo cảm giác mượt mà.
Hàm JavaScript tạo và xóa toast
JavaScript sẽ chịu trách nhiệm:
- Tạo phần tử HTML cho toast mới.
- Gắn class đúng theo loại thông báo.
- Thêm toast vào container.
- Thiết lập timeout để tự xóa.
- Xử lý sự kiện click lên nút đóng.
(function() {
var container = document.getElementById("toast-container");
function showToast(message, type, duration) {
if (!container) return;
var toast = document.createElement("div");
toast.className = "toast";
if (type === "success") {
toast.classList.add("toast--success");
} else if (type === "error") {
toast.classList.add("toast--error");
} else if (type === "warning") {
toast.classList.add("toast--warning");
}
var msg = document.createElement("div");
msg.className = "toast__message";
msg.textContent = message;
var closeBtn = document.createElement("button");
closeBtn.className = "toast__close";
closeBtn.type = "button";
closeBtn.textContent = "×";
closeBtn.addEventListener("click", function() {
removeToast(toast);
});
toast.appendChild(msg);
toast.appendChild(closeBtn);
container.appendChild(toast);
var timeout = typeof duration === "number" ? duration : 3000;
var timerId = setTimeout(function() {
removeToast(toast);
}, timeout);
toast.addEventListener("mouseenter", function() {
clearTimeout(timerId);
});
toast.addEventListener("mouseleave", function() {
timerId = setTimeout(function() {
removeToast(toast);
}, 1200);
});
}
function removeToast(toast) {
if (!toast) return;
toast.style.opacity = "0";
toast.style.transform = "translateY(8px)";
setTimeout(function() {
if (toast.parentNode) {
toast.parentNode.removeChild(toast);
}
}, 200);
}
window.showMiniToast = showToast;
})();Hàm showMiniToast được gắn lên window để có thể gọi ở bất kỳ nơi nào trong trang, ví dụ sau khi gửi form hoặc hoàn thành một thao tác.
Demo Mini Toast Notification System
Ví dụ dưới đây minh họa một hệ thống toast nhỏ gọn với các nút dùng để tạo thông báo loại success, error và warning. Toast sẽ xuất hiện ở góc dưới bên phải màn hình, tự động biến mất sau vài giây và có thể đóng thủ công.
Demo Mini Toast Notification System
Mở rộng Mini Toast Notification System
Sau khi hoàn thiện phiên bản cơ bản, có thể mở rộng hệ thống toast với nhiều tính năng nâng cao:
- Thêm hàng đợi toast và giới hạn số lượng toast hiển thị đồng thời.
- Hỗ trợ nhiều vị trí khác nhau như góc trên bên phải hoặc bên trái.
- Thêm icon tượng trưng cho từng loại thông báo.
- Cho phép truyền thêm tùy chọn như thời lượng, có hoặc không hiển thị nút đóng, hoặc callback sau khi toast biến mất.
Kết luận
Mini Toast Notification System là một thành phần giao diện nhỏ nhưng đóng vai trò quan trọng trong việc cung cấp phản hồi nhanh cho người dùng.
Bằng cách kết hợp một container cố định, một số biến thể CSS cho từng loại thông báo và một hàm JavaScript dùng chung, có thể dễ dàng tái sử dụng hệ thống toast này trong nhiều dự án web khác nhau.
Cấu trúc rõ ràng và logic giúp việc mở rộng và bảo trì trở nên thuận tiện hơn trong tương lai.
Bình luận