How to create Custom Toast Message using Css and Javascript
Posted By : Gaurav Arora | 15-Apr-2017
Hi, as we all know that showing toast message as a source of some info, whether its error message or success message is a common thing among apps or web apps. For this we have to use some plugins. What about creating our custom one’s. without including any js files or multiple lines on css. So, In this blog we are going to create our custom toast messages.
Let’s start by creating our HTML structure. For the structure I’m using a button and a div which will appears on the click of the button as a toast message.
After that we will write some css for our toast message
#toast { visibility: hidden; min-width: 250px; background-color: green; color: #fff; padding: 16px; position: fixed; z-index: 1; right: 20px; bottom: 80%; } #toast.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
Now we add will some Css3 Animations to our Toast Message for fade in fade out effects.
@keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 80%; opacity: 1;} } @keyframes fadeout { from {bottom: 80%; opacity: 1;} to {bottom: 0; opacity: 0;} }
For these keyframes make sure you also define the browser specific prefixes, like -webkit, -moz, -o, -ms. So, they will work properly in every browser.
Now we will write our javascript function:
function toastFunction() { var x = document.getElementById("toast") x.className = "show"; setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); }
In this way we can create our custom toast messages.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.