A toaster is a library that provides a simple, fast, and efficient way to create a toasted notification JavaScript library to create customizable and clean on-page alert popups.
Note: On some mobile devices, in browsers like Google Chrome (with the top navigation bar), the toast in the top center is buggy.
Features:
- 4 types of notifications: info, warning, error, and success.
- 6 groups placement and placement.
- Execute a callback after rejecting the toast.
Must Read: jQuery Widget To Show Android Like Toast Notification In Web App
How to make use of it:
1. Load the Toaster’s JavaScript and CSS information within the doc.
<link rel="stylesheet" href="toaster/toaster.css" /> <script src="toaster/toaster.js"></script>
2. Show a default toast message on the web page.
new Toaster({
msg: "Toast Message Here"
})3. Add a header to the toast message.
new Toaster({
msg: "Toast Message Here",
header: "Toast Header",
})4. Set the notification sort: info (default), warning, error, success.
new Toaster({
msg: "Toast Message Here",
type: "error",
})5. Determine how long the toast message lasts.
new Toaster({
msg: "Toast Message Here",
duration: 3
})6. Specify the time to wait earlier than displaying the toast message.
new Toaster({
msg: "Toast Message Here",
delay: 1
})7. Set the place of the toast message.
new Toaster({
msg: "Toast Message Here",
alignment: "left", // left|right|center
position: "top", // top|bottom
})8. Apply rounded borders to the toast message.
new Toaster({
msg: "Toast Message Here",
borders: "round",
})9. Override the default styles.
new Toaster({
msg: "Toast Message Here",
colors: {
warning: "#E78D0D",
error: "#E43423",
info: "#1469F5",
success: "#3BE515",
},
})10. Perform a function when the toast message dismisses.
new Toaster({
msg: "Toast Message Here",
whenEnded: (()=>{}),
})See Also –
Simple and Easy Toast Notification Popup With JavaScript
Ngx Snackbar Toast Notifications For Angular
Light, Easy and Beautiful Toast Notification Library | Vue Toastification
See Demo And Download
Official Website(RomaDev94): Click Here
This superior jQuery/javascript plugin is developed by RomaDev94. For extra advanced usage, please go to the official website.
