Animated Toast Popup With JavaScript – vtoast

Category: Javascript , Notification | September 4, 2020
Views Total:742 views
Official Page:Go to website
Last Update:September 4, 2020


Animated Toast Popup With JavaScript – vtoast


vtoast is a tiny and zero-dependency JavaScript notification library to create clean-looking, toast-like notification popups with countdown progress bars.

Inspired by Toastr jQuery plugin.

More Features:

  • With Close button or not.
  • Custom duration.
  • Custom position.
  • Auto cancels auto-dismiss when focused

How to use it:

1. Insert the stylesheet vtoast.css and JavaScrip vtoast.js into the document.

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

2. Display a basic toast popup that automatically dismisses after 5 seconds.'Only Content');

3. Display a toast popup with a title.'With Title', 'With Toast Title');

4. Show a progress bar on the top or bottom of the toast popup. Default: none.'With Title', 'With Toast Title', {
  progressbar: 'top' // or bottom

5. Customize the auto dismiss timeout. Default: 5 seconds.'With Title', 'With Toast Title', {
  duration: 3000

6. Change the position of the toast popup. Default: top-right.'With Title', 'With Toast Title', {
  position: 'bottom-center'

7. Determine whether to show a close icon inside the toast popup. Default: false.'With Title', 'With Toast Title', {
  showclose: true

8. More default configs.'With Title', 'With Toast Title', {
  width: 350,
  margin: 10,
  color: "#FFFFFF",
  backgroundcolor: "#007BFF",
  unfocusduration: 1000,
  opacity: "1"

You Might Be Interested In:

Leave a Reply