Add JavaScript Toast Notification Example in website ~ Technical Arp

You may have seen the JavaScript Toast notification example on many websites. A Javascript toast message appears like a notification alert on the website. Many websites are using Animated Toast Notification with Progress Bar using HTML and CSS. It is easy to create using JavaScript or Jquery toast notification to your website. I am using the Blogspot website so many bloggers want to Add Toast Notifications in Blogger website.

add jquery javascript toast notification message example on your website

We can use amazing animation toast notification to your website using Pure CSS and later javascript to display it.

If you have not seen any alert notification on the website, then below is a very good simple toast message in the javascript example.

You may also like to learn add image slider in blogger post

Javascript Toast Message Example

JavaScript Toast Notification or Pure CSS Alert notification for the website has the same working. The only difference is one is using Pure CSS to display and hide alerts. And Alert notification in JavaScript has some extra and advanced features.

An Alert Message you can see in the below image is an example of a simple toast notification in javascript.

jquery toast message example

Amazing Right!

Now If you want to add an alert notification to your website then follow the below steps. Also, simple steps to Toast notification alerts in blogger using JavaScript and CSS can be added to your blogger website easily.

In this article, I will be sharing steps to create a toast notification message example for your website. We will learn to step-by-step process to implement a toast notification on the blogger website.

Steps to Create Toast Notification in Blogger website

To Use JavaScript toast notification to your website we need to add toast message HTML code where you want to show it. For animation using pure CSS to your website. And finally, add javascript to show an alert message.

You may also like our best collection of 404 error page HTML template download

Follow the below steps to create or add toast notification in blogger website or any website process is almost the same.

jQuery Toast Notification Message Example

To show alert notifications on your website first add the jQuery plugin to your website template. Check if any version of jQuery is already there on your website then don't add it below. And If not there then add below jQuery library inside your website template right before the </body> end tag.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Now, you can use the below code to create a jquery toast message example for your website.

Add Toast Notification HTML code

Copy below the HTML toast message code and paste into your website where you want to show toast buttons.


<div id="toasts"></div>

<!-- start demo code -->
<button data-type="generic">Toast</button>
<button data-type="html">Custom HTML</button>
<button data-type="auto">Auto-dismiss</button>

<h1>Types</h1>
<button data-type="types" data-kind="success">Success</button>
<button data-type="types" data-kind="error">Error</button>
<button data-type="types" data-kind="warning">Warning</button>
<button data-type="types" data-kind="info">Info</button>
<!-- end demo code -->

The above HTML contains the most used javascript toast message example for your website. Like success message, error message, warning message, Auto-dismiss toast code, and more.

CSS code for Toast Notification for website

Using CSS Animation it will look more attractive, so copy and paste it into your website template before the </head> end tag.


<style>

/* You can remove button code if you want to use your website default style */

button {
  background: #fff;
  border: 0;
  border-radius: 4px;
  display: block;
  cursor: pointer;
  margin: 10px;
  padding: 5px 10px;
}

.custom-toast {
  display: flex;
  align-items: center;
}

.custom-toast img {
  background-size: 50px 50px;
  height: 50px;
  width: 50px;
}

.custom-toast p {
  font-size: 14px;
  padding: 10px;
}

#toasts {
  min-height: 0;
  position: fixed;
  right: 20px;
  top: 20px;
  width: 400px;
}

#toasts .toast {
  background: #fff;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .1);
  color: rgba(0,0,0, .6);
  cursor: default;
  margin-bottom: 20px;
  opacity: 0;
  position: relative;
  padding: 20px;
  transform: translateY(15%);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  width: 100%;
  will-change: opacity, transform;
  z-index: 1100;
} 

#toasts .toast.success {
  background: #00fa9a;
}

#toasts .toast.warning {
  background: #ffa533;
}

#toasts .toast.info {
  background: #2cbcff;
}

#toasts .toast.error {
  background: #f44336;
}

#toasts .toast.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}

#toasts .toast.hide {
  height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 30px;
  transition: all .5s ease-in-out;
}

#toasts .toast .close {
  cursor: pointer;
  font-size: 24px;
  height: 16px;
  margin-top: -10px;
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
}

</style>

So, finally, time to use the perfect JavaScript Toast notification for your website.

JavaScript toast notification code

After using the above HTML and CSS code, now time to add JavaScript code and check the live javascript toast message example.

Copy below jQuery/JavaScript code and paste it on your website just above </body> end tag and after jQuery CDN If you placed it in the above step.


<script>
;(function(window, $){
  "use strict";

  var defaultConfig = {
    type: '',
    autoDismiss: false,
    container: '#toasts',
    autoDismissDelay: 4000,
    transitionDuration: 500
  };

  $.toast = function(config){
    var size = arguments.length;
    var isString = typeof(config) === 'string';
    
    if(isString && size === 1){
      config = {
        message: config
      };
    }

    if(isString && size === 2){
      config = {
        message: arguments[1],
        type: arguments[0]
      };
    }
    
    return new toast(config);
  };

  var toast = function(config){
    config = $.extend({}, defaultConfig, config);
    // show "x" or not
    var close = config.autoDismiss ? '' : '&times;';
    
    // toast template
    var toast = $([
      '<div class="toast ' + config.type + '">',
      '<p>' + config.message + '</p>',
      '<div class="close">' + close + '</div>',
      '</div>'
    ].join(''));
    
    // handle dismiss
    toast.find('.close').on('click', function(){
      var toast = $(this).parent();

      toast.addClass('hide');

      setTimeout(function(){
        toast.remove();
      }, config.transitionDuration);
    });
    
    // append toast to toasts container
    $(config.container).append(toast);
    
    // transition in
    setTimeout(function(){
      toast.addClass('show');
    }, config.transitionDuration);

    // if auto-dismiss, start counting
    if(config.autoDismiss){
      setTimeout(function(){
        toast.find('.close').click();
      }, config.autoDismissDelay);
    }

    return this;
  };
  
})(window, jQuery);

/* ---- start demo code ---- */

var count = 1;
var types = ['default', 'error', 'warning', 'info'];

$('button').click(function(){
  var data = this.dataset;

  switch(data.type){
    case 'types':
      $.toast(data.kind, 'This is a ' + data.kind + ' toast.');
      break;
    case 'html':
      $.toast('<div class="custom-toast"><img src="https://dysfunc.github.io/animat.io/images/ron_burgundy.png"><p>You stay classy San Deigo</p></div>');
      break;

    case 'auto':
      $.toast({
        autoDismiss: true,
        message: 'This is my auto-dismiss toast message'
      });

      break;
      
    default:
       $.toast('Hello there!');
  }
});


/* ---- end demo code ---- */

</script>

That's it.

Add Toast notification popup on a blogger website

To use JavaScript toast notification on blogger website then add CSS in before your </head> tag. After adding JavaScript code at end of the body tag and toast message example HTML to your blog page or post or sidebar where you want to use it.

We have successfully learned to add alert notifications on the blogger website or any website.

Do you want to add more buttons like download button HTML code for blogger

In conclusion, Creating a JavaScript Toast Notification Example for your website

I hope you have understood all steps and learned to use the above code on your website. Even If you are a beginner and you have basic knowledge of HTML & CSS only then also try to customize easily as per your need.

If you have any difficulty or want more such CSS design then please comment down.

See you in a new blog post.

We are providing you with many amazing scripts and tutorials for free, So please follow us on our YouTube Channel to get all updates and more useful content.

Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.

add FAQ accordion in blogger

Add Table of Content in Blogger

YouTube video downloader script

Love calculator script for blogger

Decimal to Binary Converter Tool