Khái quát
Hộp thông báo hay còn gọi là toast notifications là dạng popup hiển thị thông báo trạng thái người dùng sử dụng HTML CSS và Javascript, các hộp thông báo này thường tự ẩn đi sau một thời gian nhất định hoặc khi người dùng nhấn vào nút ẩn thông báo.
Hộp thông báo toast notifications thường được sử dụng để thông báo các trạng thái sau:
- Thành công (success): Đây là thông báo thành công khi người dùng thao tác gì đó trên hệ thống.
- Thất bại (error): Thường có màu đỏ, báo hiệu hành động vừa được yêu cầu thực thi thất bại do lỗi nào đó.
- Cảnh báo (warning): Đây là dạng thông báo cảnh báo, không ảnh hưởng đến quá trình thực thi hành động, thường dùng để nhắc nhở hành vi người dùng.
- Thông tin (info): Không giống như các loại trạng thái trước, đây là loại popup hiển thị thông tin truy vấn người dùng lên.
Xây dựng hộp thông báo với HTML CSS và Javascript
Code HTML
Code CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
body{
font-family: 'Poppins', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #1C1D22;
}
button{
padding: 10px;
}
.notifications{
position: fixed;
top: 30px;
right: 20px;
}
.toast{
position: relative;
padding: 10px;
color: #fff;
margin-bottom: 10px;
width: 400px;
display: grid;
grid-template-columns: 70px 1fr 70px;
border-radius: 5px;
--color: #0abf30;
background-image:
linear-gradient(
to right, #0abf3055, #22242f 30%
);
animation: show 0.3s ease 1 forwards
}
.toast i{
color: var(--color);
display: flex;
justify-content: center;
align-items: center;
font-size: x-large;
}
.toast .title{
font-size: x-large;
font-weight: bold;
}
.toast span, .toast i:nth-child(3){
color: #fff;
opacity: 0.6;
}
@keyframes show{
0%{
transform: translateX(100%);
}
40%{
transform: translateX(-5%);
}
80%{
transform: translateX(0%);
}
100%{
transform: translateX(-10%);
}
}
.toast::before{
position: absolute;
bottom: 0;
left: 0;
background-color: var(--color);
width: 100%;
height: 3px;
content: '';
box-shadow: 0 0 10px var(--color);
animation: timeOut 5s linear 1 forwards
}
@keyframes timeOut{
to{
width: 0;
}
}
.toast.error{
--color: #f24d4c;
background-image:
linear-gradient(
to right, #f24d4c55, #22242F 30%
);
}
.toast.warning{
--color: #e9bd0c;
background-image:
linear-gradient(
to right, #e9bd0c55, #22242F 30%
);
}
.toast.info{
--color: #3498db;
background-image:
linear-gradient(
to right, #3498db55, #22242F 30%
);
}
Code Javascript
let notifications = document.querySelector('.notifications');
let success = document.getElementById('success');
let error = document.getElementById('error');
let warning = document.getElementById('warning');
let info = document.getElementById('info');
function createToast(type, icon, title, text){
let newToast = document.createElement('div');
newToast.innerHTML = `
${title}
${text}
`;
notifications.appendChild(newToast);
newToast.timeOut = setTimeout(
()=>newToast.remove(), 5000
)
}
success.onclick = function(){
let type = 'success';
let icon = 'fa-solid fa-circle-check';
let title = 'Success';
let text = 'This is a success toast.';
createToast(type, icon, title, text);
}
error.onclick = function(){
let type = 'error';
let icon = 'fa-solid fa-circle-exclamation';
let title = 'Error';
let text = 'This is a error toast.';
createToast(type, icon, title, text);
}
warning.onclick = function(){
let type = 'warning';
let icon = 'fa-solid fa-triangle-exclamation';
let title = 'Warning';
let text = 'This is a warning toast.';
createToast(type, icon, title, text);
}
info.onclick = function(){
let type = 'info';
let icon = 'fa-solid fa-circle-info';
let title = 'Info';
let text = 'This is a info toast.';
createToast(type, icon, title, text);
}