How to Show Toast Message in Javascript

In this tutorial, you will learn how to show toast message in javascript. The toast message behaves like a toast popping out of a toaster and that is why it is called a toast message.

A toast message is a notification that gets delivered in the form of a small popup. This small popup does not occupy too much space. It appears only for a couple of seconds, generally a second or two; however, such behavior can be changed.

You must have seen a notification when you perform certain actions on a website. These actions are generally CRUD operations and the notification includes success, error, or warning message related to that.

If you are a newbie, creating a toast message in javascript is not easy. I also do not even recommend you to do so because there are already a lot of third-party libraries that are well tested and work without any issue. Creating a toast message functionality from scratch is like reinventing a wheel.

The third-party library which I am going to use is Native Toast JS.  I would not say that it is very popular but it does serve our purpose. With minimal setting and styling, you can implement toast message functionality in your website. Please have a look over its github repo to learn more about it.

In the following example, we have one button element. Upon click of a button, we will display a toast message on the screen for 10 seconds and then it will disappear automatically.  Please have a look over the code example and the steps given below.

HTML & CSS

  • We have 2 elements in the HTML file (div and button).
  • The div element is just a wrapper for the button element. We are using the style attribute to center align the button element horizontally.
  • The button element has “Click Here” as innerText.
  • We have added the native-toast.css file using the link tag. This file contains default styles for our toast message.
  • We have added a minified version of Native Toast JS using the script tag.
  • We are using a CDN link here for both CSS file and minified javascript file, but you can also download them and host them locally on your server.
  • We have also included our javascript file script.js with a script tag at the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/native-toast@2.0.0/dist/native-toast.css">
    <title>Document</title>
</head>
<body>
      
    <div style="text-align: center">
        <button>Click Here</button>
    </div>

    <script src="https://unpkg.com/native-toast@2.0.0/dist/native-toast.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Javascript

  • We have selected the button element using the document.querySelector() method and attached click event listener to it.
  • In the event handler function, we are calling the nativeToast() method of Native Toast JS with an options object as a parameter. You can use this options object to completely customize the toast message. You can specify message, icon, timeout duration, position, etc for the toast message in this options object.
  • The elements property is completely optional like other options and it takes an array of HTML elements to insert after the message.
  • We have createElement() method and this method returns an HTML element. Inside this method, we have created a div element and an input element using a document.createElement() method and stored them in the el and child variables respectively.
  • We have appended the input element to the div element using the appendChild() method.
  • We are using return statement to return our newly created div element.
document.querySelector('button').addEventListener('click', () =>{
    nativeToast({
        message: 'wait wait!',
        position: 'center',    
        rounded: true,
        timeout: 10000,
        type: 'error',
        icon: false,
        edge:true,
        closeOnClick: false,
        elements: [createElement()]
      })
})

function createElement(){
    let el = document.createElement('div');
    let child = document.createElement('input');
    el.appendChild(child);
    return el;
}
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •