Basic Stackable Toast Notification Plugin For jQuery

Just another jQuery material toast plugin used for creating temporary, stackable toast/alert notification messages that will destroy themselves after a specific timeout (or by mouse clicking).

How to use it:

1. Modify, override the default toast styles as displayed below and add them to your existing CSS file.

.sl-notification.alert { background-color: rgba(220,80,80,0.95); }

.sl-notification.show {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.sl-notification {
  position: fixed;
  padding: 12px 16px;
  margin: 0;
  font-size: 16px;
  color: #fff;
  background-color: rgba(0,0,0,0.9);
  text-align: left;
  border-radius: 2px;
  opacity: 0;
  line-height: 1.4;
  font-family: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

2. Insert jQuery library and the JavaScript file jquery.basic.toast.js into the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.basic.toast.js"></script>

3. Create a basic toast message that will be displayed at the right bottom of the document and auto dismiss itself after 3000ms (3 seconds).

$.Toast('Default toast message');

4. You can also create custom toast messages by passing the setting object as the second parameter to the $.Toast function.

$.Toast('Toast message', {

  // width of the toast message
  'width': 0,

  // auto dismiss after 3 seconds
  'duration': 3000,

  // additional CSS(es)
  'class': '',

  // or 'top'
  'position': 'bottom',

  // or 'left'
  'align': 'right',

  // z-index property
  'zindex': 99999
  
});

Change log:

2017-08-16

• CSS update

---

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