Small Animated jQuery Android-Like Toast Plugin - Notice

File Size: 20.2 KB
Views Total: 1918
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Small Animated jQuery Android-Like Toast Plugin - Notice

Notice is a tiny jQuery notification plugin used to add Android-like animated toast messages anywhere on your webpage/web application. Currently support 4 types of notification: into, success, warning and error. You can easily and quickly extend the plugin to add more notification types in Javascript.

How to use it:

1. Load jQuery library and the jQuery notice plugin at the end of the document.

<script src="//"></script>
<script src="dist/notice.js"></script>

2. Create a basic toast with one line of Javascript.

// $.notice(MESSAGE,OPTIONS);

$.notice('Your message goes here', {

// plugin options


3. All the options. You can also pass these options via Html5 data-* attributes defined in trigger elements.

$.notice('Your message goes here', {

//container to append your notifications to
container: 'body',

//height of your notifications
height: 30,

//timeout before auto closing, set to false to disable auto close
timeout: 5000,

// custom the styles of your notifications
level: 'info',
offsetTop: 0,
offset: 0,
anchor: 'top',
zIndex: 1000,
showClose: false,
borderRadius: '10px',
padding: '10px 20px 10px 20px',
levels: {
  info: {
    background: '#333',
    foreground: '#fff'
  success: {
    background: '#dff0d8',
    foreground: '#3d6c2a'
  warning: {
    background: '#f9fad2',
    foreground: '#888b0f'
  error: {
    background: '#f2dede',
    foreground: '#712d2d'
  // add your own styles here


Change log:


  • bugfix

This awesome jQuery plugin is developed by firstandthird. For more Advanced Usages, please check the demo page or visit the official website.