Open navigation
Documentation See also iziModal.js

IZITOAST v1.4.0

Elegant, responsive, flexible and lightweight notification plugin with no dependencies.

examples
Star Download

A plugin for perky developers.

Changelog

All modern browsers are supported. (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge).

Bugs or suggestions for improvements? create a issue here.

1.4.0 (Updated on Aug 6, 2018)

  • new iconUrl option - Implemented

  • new displayMode option - Implemented

  • new Dynamic id generator - Implemented

  • new TypeScript Interfaces - Updated

  • bug Destroy method - Fixed

  • bug RTL mode + layout2 / Issue #131 - Fixed

1.3.0

  • new closeOnClick option - Implemented

  • new Inputs option - Implemented

  • new Html structure improving - Implemented

  • bug TypeScript Interfaces - Fixed

  • bug Issue #97 - Fixed

  • bug Progress control / Issue #108 - Fixed

1.2.0

  • new Question type - Implemented

  • new Progress Bar improving (FPS optimizations) - Implemented

  • new progressBarEasing option - Implemented

  • new overlay, overlayClose and overlayColor options - Implemented

  • new closeOnEscape option - Implemented

  • new Progress Bar methods (start, reset, pause and resume) - Implemented

  • new TypeScript Interfaces - Implemented

  • new Gulpfile - Added

  • bug Timeout with pauseOnHover and resetOnHover cannot be used without progressBar - Fixed

  • bug Timeout for displaying each internal button - Fixed

1.1.5

  • new Html structure improving - Implemented

  • bug Css min height of toast - Fixed

  • bug Corrected nomenclature in new event function - Fixed

  • bug Condition of showing progress bar or not - Fixed

1.1.4

  • bug Progress Bar resetOnHover - Fixed

1.1.2 / 1.1.3

  • new toastOnce option - Implemented

  • new Info Icon and icons for the Dark theme - Implemented

  • new Theme option (light or dark) - Implemented

  • new options onOpening, onOpened, onClosing and onClosed - Implemented

  • new Listeners iziToast-opening/opened/closing/closed - Implemented

  • new id option - Implemented

  • new maxWidth option - Implemented

  • new Multiple classes in the option - Implemented

  • new FontSize and LineHeight options for title and message - Implemented

  • new Improvements in Listener iziToast-opening/opened/closing/closed (ClosedBy and all other toast settings) - Implemented

  • new CustomEvent polyfill - Implemented

  • bug Incompatibility with iziModal animations - Fixed

  • bug RTL alignments - Fixed

  • bug Balloon Toast arrow color does not change when a background is set - Fixed

1.1.0 / 1.1.1

  • new Drag/Touch support - Implemented

  • new ClosedBy param ('drag' or 'button') - Implemented

  • new Targetfirst option - Implemented

  • new Background & message color options - Implemented

  • new Write HTML elements in toast messages - Implemented

  • bug Leap in animation when used Target - Fixed

  • bug zIndex, unexpected behavior - Fixed

  • bug box-shadow of balloon toast with progressBar not applied correctly - Fixed

1.0.2

  • new Original stylus source files - Implemented

  • new Folder structure - Updated

  • new Larger zIndex and Option to set it - Implemented

  • bug Flip animation - Fixed

  • bug Wrong positioning of internal elements - Fixed

1.0.1

  • new Internet Explorer 10+ support - Implemented



Start

NPMinstall

                        npm install izitoast --save
                    

Bowerinstall

                        bower install izitoast
                    

HTML › Include the CSS files from the dist folder in the head section:

                        
                    

HTML › Include the JS file before the scripts

                        
                    

JS › Basic example

                        iziToast.show({
                            title: 'Hey',
                            message: 'What would you like to add?'
                        });
                    

ICONS › Tested and recommended

One need only incorporate the CSS of icons and use the corresponding class.


Options

Default Options (52)

                        iziToast.show({
                            id: null, 
                            class: '',
                            title: '',
                            titleColor: '',
                            titleSize: '',
                            titleLineHeight: '',
                            message: '',
                            messageColor: '',
                            messageSize: '',
                            messageLineHeight: '',
                            backgroundColor: '',
                            theme: 'light', // dark
                            color: '', // blue, red, green, yellow
                            icon: '',
                            iconText: '',
                            iconColor: '',
                            iconUrl: null,
                            image: '',
                            imageWidth: 50,
                            maxWidth: null,
                            zindex: null,
                            layout: 1,
                            balloon: false,
                            close: true,
                            closeOnEscape: false,
                            closeOnClick: false,
                            displayMode: 0, // once, replace
                            position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            target: '',
                            targetFirst: true,
                            timeout: 5000,
                            rtl: false,
                            animateInside: true,
                            drag: true,
                            pauseOnHover: true,
                            resetOnHover: false,
                            progressBar: true,
                            progressBarColor: '',
                            progressBarEasing: 'linear',
                            overlay: false,
                            overlayClose: false,
                            overlayColor: 'rgba(0, 0, 0, 0.6)',
                            transitionIn: 'fadeInUp',
                            transitionOut: 'fadeOut',
                            transitionInMobile: 'fadeInUp',
                            transitionOutMobile: 'fadeOutDown',
                            buttons: {},
                            inputs: {},
                            onOpening: function () {},
                            onOpened: function () {},
                            onClosing: function () {},
                            onClosed: function () {}
                        });
                        

Argument
Default value
Description
class '' The class that will be applied to the toast. It may be used as a reference.
title '' Title of the toast.
titleColor '' Title color.
titleSize '' Title fontSize.
titleLineHeight '' Title lineHeight.
message '' Message of notification.
messageColor '' Message color.
messageSize '' Message fontSize.
messageLineHeight '' Message lineHeight.
backgroundColor '' Background color of the Toast
theme '' It can be light or dark or set another class. Create and use like this ".iziToast-theme-name"
color '' It can be #hexadecimal, pre-defined themes like blue, red, green and yellow or set another class. Create and use like this ".iziToast-color-name"
icon '' Icon class (font-icon of your choice, Icomoon, Fontawesome etc.).
iconText '' Icon text (font-icon using text, Material Icons, etc.).
iconColor '' Icon color.
iconUrl new null Address of file to be loaded. Example
image '' Cover image. Example
imageWidth 50 Width of cover image. Example 100px
maxWidth null set maxWidth of toast. Example 500px
zindex 99999 The z-index CSS attribute of the toast
layout 1 Example Small e Example Medium. It can be 1 or 2, or use another layout, creating the class like this: ".iziToast-layout3"
balloon false Applies a balloon like toast. Example.
close true Show "x" close button
closeOnEscape false Allows to close toast using the Esc key.
closeOnClick new false Allows to close toast clicking on it.
rtl false RTL option
position 'bottomRight' Where it will be shown. It can be bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter or center.
target '' Fixed place where you want to show the toasts. Example
targetFirst true Add toast to first position.
toastOnce depreciated false Waits for another toast to be closed on 'onClosed' function. You'll need an ID to use it.
displayMode new 0 - Waits until the toast is closed so you can open it (Use 1 or 'once'). Example
- Replaces the toast that was already open (Use 2 or 'replace'). Example
timeout 5000 Amount in milliseconds to close the toast or false to disable.
drag true Drag Feature. Is used to close the toast.
pauseOnHover true Pause the toast timeout while the cursor is on it. Example
resetOnHover false Reset the toast timeout while the cursor is on it. Example
progressBar true Enable timeout progress bar.
progressBarColor '' Progress bar color.
progressBarEasing 'linear' Animation Easing of progress bar.
overlay false Enables display the Overlay layer on the page.
overlayClose false Allows to close toast clicking on the Overlay.
overlayColor 'rgba(0, 0, 0, 0.6)' Overlay background color.
animateInside true Enable animations of elements in the toast. Example True and Example False.
buttons {} You can specify an array of buttons. Example
inputs new {} You can specify an array of inputs. Example
transitionIn 'fadeInUp' Default toast open animation. It can be: bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight or flipInX.
transitionOut 'fadeOut' Default toast close animation. It can be: fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
transitionInMobile 'fadeInUp' Default toast opening mobile transition.
transitionOutMobile 'fadeOutDown' Default toast closing mobile transition.
onOpening function() {} Callback function triggered when opening the toast.
onOpened function() {} Callback function triggered when onOpened the toast.
onClosing function() {} Callback function triggered when closing the toast.
onClosed function() {} Callback function triggered when closed the toast.

Methods

Settings

is used to set default values.

                        iziToast.settings({
                            timeout: 10000,
                            resetOnHover: true,
                            icon: 'material-icons',
                            transitionIn: 'flipInX',
                            transitionOut: 'flipOutX',
                            onOpening: function(){
                                console.log('callback abriu!');
                            },
                            onClosing: function(){
                                console.log("callback fechou!");
                            }
                        });
                    

Show

Opens the toast. (Example with buttons).

                        iziToast.show({
                            theme: 'dark',
                            icon: 'icon-person',
                            title: 'Hey',
                            message: 'Welcome!',
                            position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter
                            progressBarColor: 'rgb(0, 255, 184)',
                            buttons: [
                                ['', function (instance, toast) {
                                    alert("Hello world!");
                                }, true], // true to focus
                                ['', function (instance, toast) {
                                    instance.hide({
                                        transitionOut: 'fadeOutUp',
                                        onClosing: function(instance, toast, closedBy){
                                            console.info('closedBy: ' + closedBy); // The return will be: 'closedBy: buttonName'
                                        }
                                    }, toast, 'buttonName');
                                }]
                            ],
                            onOpening: function(instance, toast){
                                console.info('callback abriu!');
                            },
                            onClosing: function(instance, toast, closedBy){
                                console.info('closedBy: ' + closedBy); // tells if it was closed by 'drag' or 'button'
                            }
                        });
                    

Hide

Closes the specific toast.


                        var toast = document.querySelector('.iziToast'); // Selector of your toast

                        iziToast.hide({}, toast);
                        
                        // Or make new settings                
    
                        iziToast.hide({
                            transitionOut: 'fadeOutUp'
                        }, toast);

                    

Progress

Control progress bar time.

                        var toast = document.querySelector('.iziToast'); // Selector of your toast

                        iziToast.progress({}, toast).reset();  // Reset progress bar time

                        iziToast.progress({}, toast).pause();  // Pause progress bar time

                        iziToast.progress({}, toast).resume();  // Resume progress bar time

                        iziToast.progress({}, toast).start();  // Pause progress bar time

                        // Full example
                        iziToast.progress(options, toast, callback).start();
                    

Destroy

Destroy all toasts.

                        iziToast.destroy();
                    

You can use four predefined types that have icon and different colors.

Info

                        iziToast.info({
                            title: 'Hello',
                            message: 'Welcome!',
                        });
                    

Success

                        iziToast.success({
                            title: 'OK',
                            message: 'Successfully inserted record!',
                        });
                    

Warning

                        iziToast.warning({
                            title: 'Caution',
                            message: 'You forgot important data',
                        });
                    

Error

                        iziToast.error({
                            title: 'Error',
                            message: 'Illegal operation',
                        });
                    

Question

                        
                        iziToast.question({
                            timeout: 20000,
                            close: false,
                            overlay: true,
                            displayMode: 'once',
                            id: 'question',
                            zindex: 999,
                            title: 'Hey',
                            message: 'Are you sure about that?',
                            position: 'center',
                            buttons: [
                                ['', function (instance, toast) {

                                    instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');

                                }, true],
                                ['', function (instance, toast) {

                                    instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');

                                }],
                            ],
                            onClosing: function(instance, toast, closedBy){
                                console.info('Closing | closedBy: ' + closedBy);
                            },
                            onClosed: function(instance, toast, closedBy){
                                console.info('Closed | closedBy: ' + closedBy);
                            }
                        });
                    

Inputs

                        iziToast.info({
                            timeout: 20000,
                            overlay: true,
                            displayMode: 'once',
                            id: 'inputs',
                            zindex: 999,
                            title: 'Inputs',
                            message: 'Examples',
                            position: 'center',
                            drag: false,
                            inputs: [
                                ['', 'change', function (instance, toast, input, e) {
                                    console.info(input.checked);
                                }],
                                ['', 'keyup', function (instance, toast, input, e) {
                                    console.info(input.value);
                                }, true],
                                ['', 'keydown', function (instance, toast, input, e) {
                                    console.info(input.value);
                                }],
                            ]
                        });
                    

Events

Opening

Capture when the toast is opening.

                        // You can compare by any option (id, class, etc...)

                        document.addEventListener('iziToast-opening', function(data){

                            // data.detail will bring all toast settings.
                            
                            if(data.detail.class == 'test'){
                                console.info('EventListener iziToast-opening');
                            }
                        });
                    

Opened

Capture when the toast is opened.

                        document.addEventListener('iziToast-opened', function(data){
                            if(data.detail.class == 'test'){
                                console.info('EventListener iziToast-opened');
                            }
                        });
                    

Closing

Capture when the toast is closing.

                        document.addEventListener('iziToast-closing', function(data){
                            if(data.detail.class == 'test'){
                                console.info('EventListener iziToast-closing');
                            }
                        });
                    

Closed

Capture when the toast is closed.

                        document.addEventListener('iziToast-closed', function(data){
                            if(data.detail.class == 'test'){
                                console.info('EventListener iziToast-closed');
                                console.info('closedBy:', data.detail.closedBy);
                            }
                        });
                    

Made with by Marcelo Dolce.

Did you like it? Help to keep iziToast development alive.