zToaster

zToaster is a vanilla lightweight JavaScript library that provides an easy way to show toast notifications.

Support the project

By supporting the project I can dedicate more time to its development and add new improvements, or you can simply show your appreciation.


Basic usage

Adding libraries

Place the stylesheet link into the head before all other stylesheets to load the CSS.

<link href="ztoaster.min.css" rel="stylesheet">

Place the following script near the end of your pages, right before the closing body tag.

<script src="ztoaster.min.js"></script>

Create your first toast!

ztoast("Here we go!");

Paremeters

ztoast(content, options);

content is a string and options is a JSON.

Options

KeyDescriptionValues
typeNotification style.success, info, warning, error, dark
Default: success
titleNotification title.
positionPosition relative to the viewport.top-right, top-left, top-center, top-full, bottom-right, bottom-left, bottom-center, bottom-full
Default: top-right
widthWidth of the toast.Any accepted size format.
Default: 350px
durationTime in microseconds.
3000 = 3 seconds
0 or any number equal or bigger than 1000
0 = toast stays forever
Default: 3000
showIconShow / Hide icon.true, false
Default: true
iconIcon to be displayed. Will override the icon of the selected type.HTML Unicode Symbols
showCloseShow / Hide close button.true, false
Default: true
textColorText color. Will override the styles of the selected type.Any accepted color format.
backgroundColorBackground colour. Will override the styles of the selected type.Any accepted color format.
newerOnTopNewer notification will be displayed on top.true, false
Default: true

Example

ztoast("Here we go!", {
    type:"info", 
    title:"Hello toast",
    position:"top-center"
});

Demo and examples