The popup toast notification provides notifications to the users. The notification pop up from the bottom of the webpage. It also provides simple feedback about an operation in a device and gives some information. It occupies some space required for the message and, the current activity remains visible and interactive. Toasts notification automatically disappears after a few seconds(time-out). The user can decide what kinds of notifications appear and how long they should remain on the screen.
In this blog (Popup Toast Notification), the notification will get a popup from the bottom of the screen which may give you some information you received a message from someone else or some remainders. The message will be in the box, there is also a close button where you can close it if you notice it. This toast notification will get disappear automatically after a few seconds.
The source code of this Popup Toast Notification is given below, if you want the source code of this program, you can copy it. You can use this Popup Toast Notification code with your creativity and can take this project to the next level.
Popup Toast Notification [Source Code]
To make this website (Popup Toast Notification), you need to create three files: an HTML file, a CSS file, and JavaScript. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body{
background: #fd746c;
background: -webkit-linear-gradient(to right, #ff9068, #fd746c);
background: linear-gradient(to right, #ff9068, #fd746c);
}
.toast-container {
position: fixed;
bottom: -180px;
width: 90%;
max-width: 720px;
display: flex;
align-items: center;
background: #12192c;
color: #ff9068;
font-family: "Montserrat", sans-serif;
padding: 0 16px;
border-radius: 14px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
left: 50%;
transform: translateX(-50%);
transition: all 1800ms ease;
}
.toast-container.active {
bottom: 20px;
}
.toast-container h3 {
font-weight: 800;
line-height: 1.5;
font-size: 16px;
}
.toast-container .text-content {
padding: 0 24px;
padding-right: 40px;
}
.toast-container a {
color: #5f64f3;
}
.toast-container .close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.image img{
width:100px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.close img{
width:40px
}
.credit a{
text-decoration: none;
color: #5f64f3;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
}
const toastContainer = document.querySelector(".toast-container");
const closeBtn = document.querySelector(".toast-container .close");
const toastLink = document.querySelector(".toast-container a");
if (!localStorage.getItem("displayToast")) {
setTimeout(() => {
toastContainer.classList.add("active");
}, 1000);
}
const stopDisplayingToast = () => {
localStorage.setItem("displayToast", false);
toastContainer.classList.remove("active");
};
closeBtn.addEventListener("click", stopDisplayingToast);
toastLink.addEventListener("click", stopDisplayingToast);
Thank you for reading our blog. If you face any problem in creating this Popup Toast Notification using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team