Animated Toast Popup With JavaScript – vtoast

Preview:

Description:

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.

vtoast.show('Only Content');

3. Display a toast popup with a title.

vtoast.show('With Title', 'With Toast Title');

4. Show a progress bar on the top or bottom of the toast popup. Default: none.

vtoast.show('With Title', 'With Toast Title', {
  progressbar: 'top' // or bottom
});

5. Customize the auto dismiss timeout. Default: 5 seconds.

vtoast.show('With Title', 'With Toast Title', {
  duration: 3000
});

6. Change the position of the toast popup. Default: top-right.

vtoast.show('With Title', 'With Toast Title', {
  position: 'bottom-center'
});

7. Determine whether to show a close icon inside the toast popup. Default: false.

vtoast.show('With Title', 'With Toast Title', {
  showclose: true
});

8. More default configs.

vtoast.show('With Title', 'With Toast Title', {
  width: 350,
  margin: 10,
  color: "#FFFFFF",
  backgroundcolor: "#007BFF",
  unfocusduration: 1000,
  opacity: "1"
});