Stackable Toast Notification Plugin - jQuery Pomelo Toast

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.

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.

  • Publication date: 04.06.2018
  • Source