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="//code.jquery.com/jquery-1.11.1.min.js"></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:

2017-09-01

• bugfix

---

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