Pure Javascript for Displaying Toast Notifications | toaster-box.js

Displaying-Toast-Notifications

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.

How to make use of it:

1. Load the stylesheet toaster-box.css and JavaScript toaster-box.js within the HTML doc.

<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 additional CSS class to the toast notification.

new ToasterBox({ 
    msg: 'Toast Message Here',
    className: 'your classes here'
});

Sliding Toast Notification In JavaScript, Pure Javascript Toaster Plugin/Github


See Demo And Download

Official Website(kvinbabbar): Click Here

This superior jQuery/javascript plugin is developed by kvinbabbar. For extra Advanced Usages, please go to the official website.