
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.
- Publication date: 12.03.2018
- Source