Stackable Toast Notification Plugin - jQuery Pomelo Toast

Pomelo Toast is a tiny jQuery plugin to create toast-like notification messages that stack one after another when there are multiple instances on the page.

Comes with 6 built-in notification styles: Error, Primary, Success, Warning, White, and Blue.

By default, the toast notification auto dismisses after 3 seconds, with a fade out animation. You can config the plugin to make the toast notification always be visible on the page until you close it manually.

How to use it:

1. To get started, include the following JavaScript and CSS files on the page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="pomelo-toast.min.js"></script>
<link rel="stylesheet" href="pomelo-toast.min.css">

2. The JavaScript to show a default (Primary) toast message on the page that will auto dismiss after 3 seconds.

toast.show('Toast Message Here')

3. Change the default toast type.

toast.show({

  // 'error', 'warning', 'success'
  // 'white', 'blue'
  type: 'primay',

  // toast message
  text: 'Toast Message Here'
  
})

4. Adjust the time to wait before dismissing the toast message.

toast.show({

  // 'error', 'warning', 'success'
  // 'white', 'blue'
  type: 'primay',

  // toast message
  text: 'Toast Message Here',

  // default: 3000
  time: 5000 // 5 seconds

})

5. If you want to keep the toast message always be visible.

toast.show({

  // 'error', 'warning', 'success'
  // 'white', 'blue'
  type: 'primay',

  // toast message
  text: 'Toast Message Here',

  // default: 3000
  time: -1

})

---

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