Small Unobtrusive Toast Popup Plugin For jQuery - simpleToast

Small Unobtrusive Toast Popup Plugin For jQuery - simpleToast

simpleToast is a small, unobtrusive yet customizable jQuery notification plugin to create minimal, clean, non-blocking toast popups on the web app.

1. Add references to jQuery library and the simpleToast plugin's file.

<link href="css/jquery.simpleToast.css" rel="stylesheet">
<script src="" 
<script src="./js/jquery.simpleToast.js"></script>

2. Load a iconic font for the toast icons (OPTIONAL).

<link rel="stylesheet" href="">

3. Create and display a custom toast message on the screen.

  content: "Toast Message Here"

4. Override the default options to customize the toast message as per your needs.

  // toast message
  content: "Toast Message Here",
  // max width
  maxWidth: "200px",
  // CSS padding property
  padding: "10px 20px",
  // background color
  background: "#2b2a2a",
  // opacity level
  opacity: 0.9,
  // z-index
  zIndex: 9999, 
  // border radius
  borderRadius: "6px", 
  // duration in milliseconds
  duration: 2000, //toast 
  // animation
  animateIn: "boxBounceIn", 
  // duration of animation
  animateDuration: 500,
  // text color
  color: "#ffffff",
  // font size
  fontSize: "14px", 
  // toast icon
  icon:"fa fa-spinner fa-pulse"

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

  • Publication date: 12.03.2018
  • Source