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
| Key | Description | Values |
|---|---|---|
| type | Notification style. | success, info, warning, error, dark Default: success |
| title | Notification title. | |
| position | Position relative to the viewport. | top-right, top-left, top-center, top-full, bottom-right, bottom-left, bottom-center, bottom-full Default: top-right |
| width | Width of the toast. | Any accepted size format. Default: 350px |
| duration | Time in microseconds. 3000 = 3 seconds | 0 or any number equal or bigger than 1000 0 = toast stays forever Default: 3000 |
| showIcon | Show / Hide icon. | true, false Default: true |
| icon | Icon to be displayed. Will override the icon of the selected type. | HTML Unicode Symbols |
| showClose | Show / Hide close button. | true, false Default: true |
| textColor | Text color. Will override the styles of the selected type. | Any accepted color format. |
| backgroundColor | Background colour. Will override the styles of the selected type. | Any accepted color format. |
| newerOnTop | Newer notification will be displayed on top. | true, false Default: true |
Example
ztoast("Here we go!", {
type:"info",
title:"Hello toast",
position:"top-center"
});