Home Web Design CSS Toast Message With Close Animation Using CSS & jQuery | Info Messages

Toast Message With Close Animation Using CSS & jQuery | Info Messages

February 23, 2020

6528

How we can create popup success or information messages using HTML CSS JS? Solution: See this Toast Message With Close Animation Using CSS & jQuery, Info Messages.

Previously I have shared an info window program, but this is something different this is a toast message. Basically, Toast Messages is a small, non-disruptive popup for success or information messages that disappears automatically after a few seconds. Firstly it introduces by android, now you will see on many software on windows and mac. This is called a toast message because they pop up like toast from a toaster. This program is a kind of prototype of that using HTML CSS and jQuery.

Today you will learn to create the popup info messages UI design. Basically, there are three types of toast messages, the first one is for success, the second is info, and the third one is a warning. All these messages boxes have a separate icon, some texts, and a cross icon on the right side for closing it. When you will click on the cross icons then the message box will close and disappear with a smooth animation.

So, Today I am sharing Toast Message With Close Animation Using CSS and jQuery. Basically, the whole layout any styles are based on HTML and CSS, but I used jQuery for the close function. There the icons are based on SVG, there is no third-party icon library. You can use this on your website as progress result dialog. This type of massage is best for success, error, and warning dialogs.

If you are thinking now how these messages actually are, then see the preview given below.

Preview Of Popup Info Messages

See this video preview to getting an idea of how this toast message looks like.

https://webdevtrick.com/wp-content/uploads/toast-messages-css-jquery.mp4?_=1

Live Demo

Now you can see this design visually, also you can see and test close animation live by pressing the button given above. If you like this program, then get the source code of its.

Toast Message With Close Animation Source Code

Before sharing source code, let’s talk about it. First I have created a main div named container and placed all elements inside it. There I have created 3 different sections because there are 3 types of messages. Each message section two SVG icons for the main icon and close icon, and some texts. Also in the HTML file, I have linked other files like CSS, JS, jQuery CDN.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like position, margin, padding, etc to the elements. Also, I have placed SVG icons and gave color values to those. There I have used a google font to style the texts. I have used CSS transform command for the close or cross icon.

jQuery handling here only close feature in this program, left all are based on CSS and HTML. jQuery detects the click on cross icon and closes the message box with a slow fade animation. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript.

Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Toast Messages | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
<div class="cell">
<div class="toast toast--green">
  <div class="icon">
    <svg version="1.1" class="toast__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g><g><path d="M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0    c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7    C514.5,101.703,514.499,85.494,504.502,75.496z"></path>
	</g></g>
    </svg>
  </div>
  <div class="content">
    <p class="type">Success</p>
    <p class="message">This toast message can be closed by click cross icon.</p>
  </div>
  <div class="close">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 15.642 15.642">
  <path fill-rule="evenodd" d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"></path>
</svg>
  </div>
</div>


<div class="toast toast--blue add-margin">
  <div class="icon">
<svg version="1.1" class="toast__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
	<g id="info">
		<g>
			<path  d="M10,16c1.105,0,2,0.895,2,2v8c0,1.105-0.895,2-2,2H8v4h16v-4h-1.992c-1.102,0-2-0.895-2-2L20,12H8     v4H10z"></path>
			<circle  cx="16" cy="4" r="4"></circle>
		</g>
	</g>
</g>

    </svg>
  </div>
  <div class="content">
    <p class="type">Info</p>
    <p class="message">This toast message can be closed by click cross icon.</p>
  </div>
  <div class="close">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 15.642 15.642">
  <path fill-rule="evenodd" d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"></path>
</svg>
  </div>
</div>

<div class="toast toast--yellow add-margin">
  <div class="icon">
<svg version="1.1" class="toast__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 301.691 301.691" style="enable-background:new 0 0 301.691 301.691;" xml:space="preserve">
<g>
	<polygon points="119.151,0 129.6,218.406 172.06,218.406 182.54,0  "></polygon>
	<rect x="130.563" y="261.168" width="40.525" height="40.523"></rect>
</g>
    </svg>
  </div>
  <div class="content">
    <p class="type">Warning</p>
    <p class="message">This toast message can be closed by click cross icon.</p>
  </div>
  <div class="close">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 15.642 15.642">
  <path fill-rule="evenodd" d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"></path>
</svg>
  </div>
</div>
</div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Toast Messages | Webdevtrick.com</title>

</head>

<body>

</g></g>

</svg>

</div>

<p class="type">Success</p>

<p class="message">This toast message can be closed by click cross icon.</p>

</div>

</svg>

</div>

<g>

<g>

</g>

</svg>

</div>

<p class="message">This toast message can be closed by click cross icon.</p>

</div>

</svg>

</div>

<g>

</g>

</svg>

</div>

<p class="type">Warning</p>

<p class="message">This toast message can be closed by click cross icon.</p>

</div>

</svg>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');

html, body{
  height:100%;
  width:100%;
  font-family: 'Raleway', sans-serif;
  background-color:#efefef;
  display: table;
  text-align: center;

}
.container {
    display: table-cell;
    vertical-align: middle;
}
.cell{
  display:inline-block;
}
.add-margin{
  margin-top:20px;
}
.toast__svg{
  fill:#fff;
}
.toast {
  text-align:left;
    padding: 21px 0;
    background-color:#fff;
    border-radius:4px;
    max-width: 500px;
    top: 0px;
    position:relative;
    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
}
.toast:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
  border-top-left-radius:4px;
  border-bottom-left-radius: 4px;

}
.icon{
  position:absolute;
  top:50%;
  left:22px;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  padding: 7px;
  border-radius:50%;
  display:inline-block;
}
.type {
  color: #3e3e3e;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 8px;
}
.message {
    font-size: 14px;
    margin-top: 0;
  margin-bottom: 0;
    color: #878787;
}
.content{
  padding-left:70px;
  padding-right:60px;
}
.close {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 14px;
    cursor:pointer;
    height: 14px;
  fill:#878787;
    transform: translateY(-50%);
}
.toast--green .icon{
  background-color:#2BDE3F;
}
.toast--green:before{
  background-color:#2BDE3F;
}
.toast--blue .icon{
  background-color:#1D72F3;
}
.toast--blue:before{
  background-color:#1D72F3;
}
.toast--yellow .icon{
  background-color:#FFC007;
}
.toast--yellow:before{
  background-color:#FFC007;
}

100

101

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');

html, body{

height:100%;

width:100%;

font-family: 'Raleway', sans-serif;

background-color:#efefef;

display: table;

text-align: center;

}

.container {

display: table-cell;

vertical-align: middle;

}

.cell{

display:inline-block;

}

.add-margin{

margin-top:20px;

}

.toast__svg{

fill:#fff;

}

.toast {

text-align:left;

padding: 21px 0;

background-color:#fff;

border-radius:4px;

max-width: 500px;

top: 0px;

position:relative;

box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);

}

.toast:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 4px;

height: 100%;

border-top-left-radius:4px;

border-bottom-left-radius: 4px;

}

.icon{

position:absolute;

top:50%;

left:22px;

transform:translateY(-50%);

width:14px;

height:14px;

padding: 7px;

border-radius:50%;

display:inline-block;

}

.type {

color: #3e3e3e;

font-weight: 700;

margin-top: 0;

margin-bottom: 8px;

}

.message {

font-size: 14px;

margin-top: 0;

margin-bottom: 0;

color: #878787;

}

.content{

padding-left:70px;

padding-right:60px;

}

.close {

position: absolute;

right: 22px;

top: 50%;

width: 14px;

cursor:pointer;

height: 14px;

fill:#878787;

transform: translateY(-50%);

}

.toast--green .icon{

background-color:#2BDE3F;

}

.toast--green:before{

background-color:#2BDE3F;

}

.toast--blue .icon{

background-color:#1D72F3;

}

.toast--blue:before{

background-color:#1D72F3;

}

.toast--yellow .icon{

background-color:#FFC007;

}

.toast--yellow:before{

background-color:#FFC007;

}

function.js

// Code By Webdevtrick ( https://webdevtrick.com )
jQuery(document).ready(function(){
  jQuery('.close').click(function(e){
    e.preventDefault();
    var parent = $(this).parent('.toast');
    parent.fadeOut("slow", function() { $(this).remove(); } );
  });
});

// Code By Webdevtrick ( https://webdevtrick.com )

jQuery(document).ready(function(){

jQuery('.close').click(function(e){

e.preventDefault();

var parent = $(this).parent('.toast');

parent.fadeOut("slow", function() { $(this).remove(); } );

});

That’s It. Now you have successfully created Toast Message With Close Animation Using CSS & jQuery, Popup Info Messages. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.