Toast-like Alert/Confirm/Loading Box Plugin - webToast
File Size: | 13.6 KB |
---|---|
Views Total: | 2334 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
webToast is a tiny yet versatile popup box plugin to create animated alert & confirm dialogs and loading boxes inspired by Android's Toast Messages.
How to use it:
1. Load the latest version of jQuery library and webToast plugin's files in the HTML file.
<link rel="stylesheet" href="/path/to/dist/webToast.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/webToast.min.js"></script>
2. Create toast-like alert popups of different types as follows:
webToast.Danger({ status: 'Title', message: 'Alert Message' }); webToast.Success({ // REQUIRED status: 'Title', message: 'Alert Message', // OPTIONAL. // Default: 3000 delay: 5000 }); webToast.Info({ // REQUIRED status: 'Title', message: 'Alert Message', // OPTIONAL // Default: 'topright' // or 'topleft', 'topcenter' // 'bottomleft', 'bottomcenter', 'bottomright' align:'topcenter' });
3. Create a confirmation dialog:
// create a new confirm box instance var confirmBox = webToast.confirm("Are you sure?"); // do something when confirmed confirmBox.click(function(){ // alert('confirmed Data'); })
4. Create a loading box with or without a top progress bar.
var load = webToast.loading({ // REQUIRED status: 'Loading...', message: 'Please Wait a moment', // OPTIONAL // Default: 'topright' // or 'topleft', 'topcenter' // 'bottomleft', 'bottomcenter', 'bottomright' align:'topcenter', // OPTIONAL // Show a top progress bar line: true }); // remove load.remove();
This awesome jQuery plugin is developed by emrancu. For more Advanced Usages, please check the demo page or visit the official website.