Responsive Configurable Toast Notification Library – iziToast

iziToast is a simple, fast yet fully configurable JavaScript used to create responsive, elegant and CSS3 animated toast notifications of various types in the screen.

Key features:

• 4 built-in themes: info, warning, error, and success.
• Easy to add your own themes.
• Custom icons.
• Custom images.
• Custom positions.
• Auto close with a progress bar.
• Custom CSS3 transitions.

Basic usage:

Download and import the following files into the document.

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

The JavaScript to show a basic toast notification in the screen.

iziToast.show({
    title: 'Hello World!',
    message: 'I am a basic toast message!'
});

All default settings which can be used to customize the notifications.

class: '',
title: '',
message: '',
color: '', // blue, red, green, yellow
icon: '',
iconText: '',
iconColor: '',
image: '',
imageWidth: 50,
layout: 1,
balloon: false,
close: true,
rtl: false,
position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
target: '',
timeout: 5000,
pauseOnHover: true,
resetOnHover: false,
progressBar: true,
progressBarColor: '',
animateInside: true,
buttons: {},
transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
transitionInMobile: 'fadeInUp',
transitionOutMobile: 'fadeOutDown',
onOpen: function () {},
onClose: function () {}

API.

// override options
iziToast.settings({
  // options here
});
// hide the toast notification
iziToast.hide();
// create 'Info' toast notification
iziToast.info({
  title: 'Hello World!',
  message: 'I am a toast message!'
});
// create 'Success' toast notification
iziToast.success({
  title: 'Hello World!',
  message: 'I am a toast message!'
});
// create 'Warning' toast notification
iziToast.warning({
  title: 'Hello World!',
  message: 'I am a toast message!'
});
// create 'Erro' toast notification
iziToast.error({
  title: 'Hello World!',
  message: 'I am a toast message!'
});
// remove all the toast notifications from DOM
iziToast.destroy();

Changelog:

08/06/2018

• v1.4.0