Minimal Cross-platform jQuery Toaster Plugin - ztoast

File Size: 9.08 KB
Views Total: 782
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Cross-platform jQuery Toaster Plugin - ztoast

ztoast is a really simple and small jQuery plugin used to display 'Toast' style notification messages at the bottom right of the webpage.

Features:

  • Fade in/out animations.
  • Auto close after 5 seconds.
  • Click/tap on the notifications to close manually.

How to use it:

1. Just include the main JavaScript file ztoast.min.js after jQuery library and you're ready to go.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="build/ztoast.min.js"></script>

2. The JavaScript to show a toast message that will auto dismiss after 5 seconds.

$.toast('Hello World!')

3. Specify the duration in milliseconds.

// 3 seconds
$.toast('Hello World!',3000)

4. Override the default CSS styles of the toast notifications.

#ztoast-container {
  width: 322px;
  position: fixed;
  right: 10px;
  ...
}

5. Default plugin arguments.

var containerId = 'ztoast-container';
var styleId = 'ztoast-stylesheet';
var contentClass = 'ztoast-content';
var fadeTime = 500;
var defaultDuration = 2000;
var onClickClose = true;

Change log:

2016-12-10

  • fix container z-index

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