Create Android Or Modal Style Toast Messages With jQuery - ToastMe

Create Android Or Modal Style Toast Messages With jQuery - ToastMe
File Size: 9.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

ToastMe is a super tiny (1kb minified) jQuery plugin to show an Android style toast notification with a custom message which will be closed after a specific timeout. The plugin also allows to create a modal style notification popup using Bootstrap modal component. Currently supports 4 types of toast notifications: info, success, warning and error.

More Example:

How to use it:

1. Load the jQuery ToastMe plugin's CSS file in the document's head section:

<link href="toastme.css" rel="stylesheet">

2. Create a DIV element to place the toast message.

<div id="myToast" class="toast-popup"></div>

3. Load jQuery library the jQuery ToastMe plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="toastme.js"></script>

4. Show a default toast notification on the webpage.

$("#myToast").showToast({
  message: 'custom message here'
});

5. Change the default toast type.

$("#myToast").showToast({
  message: 'custom message here'
  mode: 'info' // warning, error, success
});

6. Override the default duration the toast message should stay in the screen.

$("#myToast").showToast({
  message: 'custom message here'
  mode: 'info',
  duration: 1500,
});

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