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.

How to use it:

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

<link href="css/impleToast.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="./js/simpleToast.js"></script>

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

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

$('body').simpleToast({
  content: "Toast Message Here"
});

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

$('body').simpleToast({

  // toast message
  content: "Toast Message Here",

  // min width
  minWidth: "100px",

  // 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:"icon-success"
  
});

Change log:

2018-04-09

• rewritten in ES2015

---

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