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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="./js/jquery.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",
  // 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.