Pretty Toast Notification Plugin For Bootstrap - Toaster

Toaster is a lightweight jQuery notification plugin which lets you create toast- and growl-style notification messages using Bootstrap alerts component.

How to use it:

1. The plugin requires jQuery library and Bootstrap framework to work properly.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Load the JavaScript file jquery.toaster.js after jQuery.

<script src="jquery.toaster.js"></script>

3. The JavaScript to display a default toast notification on the web page.

$.toaster('Your message here');

4. Config the toast notification by passing the options array to the $.toaster.

$.toaster({

  // toast message
  message : 'Your message here', 

  // toast title
  title : 'Your Title', 

  // or 'success', 'info', 'warning', 'danger'
  priority : 'danger'
  
});

5. Or by passing the parameters as strings.

$.toaster(message, title, priority);

6. All default plugin settings.

$.toaster({
settings : {

  'toaster'         :
    {
      'id'        : 'toaster',
      'container' : 'body',
      'template'  : '<div></div>',
      'class'     : 'toaster',
      'css'       :
      {
        'position' : 'fixed',
        'top'      : '10px',
        'right'    : '10px',
        'width'    : '300px',
        'zIndex'   : 50000
      }
    },

    'toast'       :
    {
      'template' :
      '<div class="alert alert-%priority% alert-dismissible" role="alert">' +
        '<button type="button" class="close" data-dismiss="alert">' +
          '<span aria-hidden="true">&times;</span>' +
          '<span class="sr-only">Close</span>' +
        '</button>' +
        '<span class="title"></span>%delimiter% <span class="message"></span>' +
      '</div>',

      'defaults' :
      {
        'title'     : 'Notice',
        'priority'  : 'success',
        'delimiter' : ':'
      },

      'css'      : {},
      'cssm'     : {},
      'csst'     : { 'fontWeight' : 'bold' },

      'fade'     : 'slow',

      'display'    : function ($toast)
      {
        return $toast.fadeIn(settings.toast.fade);
      },

      'remove'     : function ($toast, callback)
      {
        return $toast.animate(
          {
            opacity : '0',
            padding : '0px',
            margin  : '0px',
            height  : '0px'
          },
          {
            duration : settings.toast.fade,
            complete : callback
          }
        );
      }
    },

    'debug'        : false,
    'timeout'      : 1500,
    'stylesheet'   : null,
    'donotdismiss' : []
    
}
});

---

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