Toaster is a pure JavaScript plugin for displaying notifications such as custom text or HTML message, duration, custom class, toggle close button, status, custom close icon, and background color.
While toast is often used to describe slices of bread that have been browned with dry heat, it can really refer to any type of item that has been browned in this way.
toast can refer to a non-obtrusive, modal widget used to display expired token (also known as auto-dismiss) windows of information to the user. It does not accept focus or user input and does not interrupt current activity.
Must Read: Create Toaster Notifications with a Few Lines of Code | ToasterJS
How to make use of it:
1. Load the stylesheet toaster-box.css and JavaScript toaster-box.js within the HTML document.
<link rel="stylesheet" href="toaster-box.css" /> <script src="toaster-box.js"></script>
2. Display a primary toast notification on the web page. The message supports each plain text and HTML content:
new ToasterBox({
msg: 'Toast Message Here'
});
new ToasterBox({
msg: '<strong>Toast</strong> Message Here',
html : true
});3. Determine the delay timeout in ms. By default, the toast notification will auto-dismiss after 3 seconds.
new ToasterBox({
msg: 'Toast Message Here',
duration: 5000
});4. Determine whether or not to indicate the close button.
new ToasterBox({
msg: 'Toast Message Here',
closeButton: false
});5. Customize the close icon.
new ToasterBox({
msg: 'Toast Message Here',
closeIcon: '<img src='./close.svg' alt='close icon' width='20' class='inverted'/>'
});6. Determine whether or not to indicate the toast notification on the web page load.
new ToasterBox({
msg: 'Toast Message Here',
autoOpen: false
});7. Determine the position of the toast notification: ‘top-left’, ‘top-center’, ‘top-right’, ‘bottom-left’, ‘bottom-center’, ‘bottom-right’.
new ToasterBox({
msg: 'Toast Message Here',
position: 'bottom-center'
});8. Set the max-width of the toast notification.
new ToasterBox({
msg: 'Toast Message Here',
maxWidth: 350
});9. Apply an additional CSS class to the toast notification.
new ToasterBox({
msg: 'Toast Message Here',
className: 'your classes here'
});See Demo And Download
Official Website(kvinbabbar): Click Here
This superior jQuery/javascript plugin is developed by kvinbabbar. For extra Advanced Usage, please go to the official website.
