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 |
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.