Skip to content
ToastMe is a jQuery plugin to show toast notification popup in html just like the toast notification in Android OS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples Update toast-popup-demo.html Jul 19, 2016
LICENSE
README.md Update README.md Jul 12, 2018

README.md

ToastMe (A Toast Notification Popup)

ToastMe is a jQuery plugin to show toast notification popup in html just like the toast notification in Android

Try a Demo: Demo1 Demo2

How to use

  1. Add toastme stylesheet

    <link href="dist/css/toastme.css" rel="stylesheet" />
  2. Add jquery and toastme.js into the html page

    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="dist/js/toastme.js"></script>
  3. Insert a div tag with CSS class “toast-popup” and provide an appropriate id also.

    Eg:

    <div id="myToast" class="toast-popup"></div>
  4. Now you done with setup of toast popup plugin.

You can use this toastme to show any kind of status message to user and it will be more useful when you are dealing with an ajax request in your page.

After you setup the plugin, you can call showToast() method whenever you want to show a notification to user.

Eg:

$('#myToast').showToast({
   message: 'The table got updated successfully',
   duration: 3000,
   mode: 'success'
});

Syntax

$('<selector for toast-popup div tag>').showToast([options]);

options
Type: PlainObject
A set of key/value that configure the toast popup. All are optional.

  • message (default: 'This is toast notification!')
    Type: String
    The message to be shown to user using toast popup. If it is emply the default message will shown

  • duration (default: 1500ms)
    Type: Number
    The number of milliseconds determining how long the popup has to be displayed on screen

  • mode (default: 'info')
    Type: String
    A pre-defined value determining the color of popup. You can show any kind of messages to user using these different modes of toast popup.
    Possible values are: 'info', 'success', 'warning', 'error'

Refer the demo code for further reference.

You can’t perform that action at this time.