⚡️ ToastmeJS

ToastmeJS is a very simple, flexible and light weigth plugin that shows Notifications and modal Dialogs on your website.


Download Here


📣 Notifications

Default theme

Ligh theme

Dark theme

🎨 Customize

You can customize duration, position, distance, z-overlapping and a theme

  1. timeout: miliseconds
  2. positionY: 'top' or 'bottom'
  3. positionX: 'left', 'right' or 'center' position
  4. distanceY: distance from the Y axis
  5. distanceX: distance from the X axis
  6. zIndex: overlapping order
  7. theme: default, ligh or dark (leave empty for "default" theme)


const config = {
    timeout: 5000,
    positionY: "bottom", // top or bottom
    positionX: "center", // right left, center
    distanceY: 20, // Integer value
    distanceX: 20, // Integer value
    zIndex: 100, // Integer value
    theme: "default" // default, ligh or  dark (leave empty for "default" theme)
};

💬 Toastme Dialogs

Click some buttons to get some dialogs!

    Dialog default

    Dialog types

🎨 Customize your dialogs

You can customize your toastme dialog

  1. title: dialog title
  2. text: dialog text
  3. textConfirm: confirm button caption
  4. textCancel: cancel button caption
  5. showCancel: Show cancel button? 'true' or 'false'
  6. type: select 'success', 'danger', 'warning', 'info' or 'question'
  7. dark: Show dark theme? 'true' or 'false'


    //Example
toastme.yesNoDialog({
    title: "You are the Winner!",
    text: "Do you want to pick your price?",
    textConfirm: "Confirm",
    textCancel: "Cancel", 
    showCancel: true, // true or false
    type: "success" // 'success', 'danger', 'warning', 'info' or 'question'
}).then(function(value) {
    if (value) {
        console.log('You clicked Confirm')
    } else {
        console.log('You clicked Cancel')
    }
});