Android-style Simple jQuery Toast Plugin - eatoast

File Size: 7.08 KB
Views Total: 2681
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Android-style Simple jQuery Toast Plugin - eatoast

eatoast is a tiny and simple to use jQuery plugin that creates Android-style toasts to display feedback messages (default, success, info, warning and danger) in a small popup.

How to use it:

1. Load the jQuery eatoast plugin's stylesheet for core toast styles.

<link href="src/jquery.eatoast.css" rel="stylesheet">

2. Load the jQuery eatoast plugin's script after jQuery library but before the closing body tag.

<script src="//"></script>
<script src="src/jquery.eatoast.js"></script>

3. Create toast messages as follow:

// Default
$"This is a default toast.");

// Success
$.toast.success("This is a success toast.");

// Info
$"This is a info toast.");

// Warning
$.toast.warn("This is a warning toast.");

// Danger
$.toast.danger("This is a dange toast.");

4. Available options to customize your toast messages.


// How long the toast stays
duration: 3000,

// The text to be shown
text: '',

// The container of the toast.
container: document.body,

// The text color
color: '#333',

// The background color
background: '#F5F5F5',

// The toast boader's css value
border: 'none',

// The class you want to add on the toast. 
style: '',

// Whether the toast will hide automatically.
autoclose: true,

// Show the close button
closeBtn: false,

// The width of the toast
width: 'auto',

// fade or slide
animate: 'fade', 

// You can change whether the toast appear from the bottom or the top
align: 'top',

// The animation speed, number or jQuery.fx.speeds.
speed: 'fast',

// The opacity of the toast.
opacity: 0.9,

// The offset position, percentage or number.
position: '20%'


Change log:


  • small fix.

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