ToastJS
Toast message Javascript library
How to use
1 - Add toast.min.js to your project (requires jquery)
2 - Done! Show toast messages! that simple
Toast.show("This is a <b>Toast</b> message on bottom"); Customize it
You can show custom toast messages with ToastJs
- Change foreground or background colors of toast
- Change position or alignment
- Change duration of animations
- Change font size, opacity etc
Some customization examples
Toast.show({ message : "This is a <b>Toast</b> message on top", position : Toast.POSITION_TOP }); Toast.show({ message : "This is a long <b>Toast</b> message on bottom", duration : Toast.DURATION_LONG }); Toast.show({ message : "This is a custom <b>Toast</b> message on bottom with purple background", background : "#630460" }); Toast.show({ message : "This is a custom <b>Toast</b> message on top right with blue background", background : "#004a80", position : Toast.POSITION_TOP, align : Toast.ALIGN_RIGHT }); You can show multiple toast messages ToastJS will queue them and show in order
These are default parameters of Toast
position : Toast.POSITION_BOTTOM, duration : Toast.DURATION_NORMAL, align : Toast.ALIGN_CENTER, class : Toast.DEFAULT_CLASS, background : '#000000', color : '#ffffff', opacity : '0.6', radius : '16', fontSize : '14px', appearTime : 0.3, // seconds message : '', top : '40px', // if position-top top:40px, position-bottom bottom:40px left : '40px' // if align-left left:40px, align-right left:40px
