Press "Enter" to skip to content

Customizable Toast Notification Javascript Library | Toaster

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.

toast notification jquery, toast message jquery, javascript toast library, css toast, jquery toaster, toastify js, toast library android, beautiful toast message

Note: On some mobile devices, in browsers like Google Chrome (with the top navigation bar), then toast in the top center is buggy.

Features:

  • 4 types of notifications: information, warning, error, success.
  • 6 groups placement and placement.
  • Execute a callback after rejecting the toast.

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: data (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: (()=>{}),
})

Clean And Customizable Toast Notification Library, Toaster Plugin/Github


See Demo And Download

Official Website(RomaDev94): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *