Reusable Toast-like Notification Box In Vanilla JavaScript – Foxx.js

Foxx.js is a Vanilla JavaScript plugin to create reusable, customizable, toast-like notification boxes in 4 styles: success, info, warning, and error.

More Features:

• Dark theme.
• 7 positions.
• 5 CSS3 powered animations.
• Dismissable or not.
• Custom icons.

How to use it:

1. Insert the required JavaScript and Stylesheet into the HTML page.

<link rel="stylesheet" href="foxx.css" />
<script src="foxx.js"></script>

2. Create toast notification boxes on the page:

fx.toast.success({
  title:'Success Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {/*options here*/}
}) 
fx.toast.info({
  title:'Info Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {/*options here*/}
}) 
fx.toast.warning({
  title:'Warning Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {/*options here*/}
}) 
fx.toast.error({
  title:'Error Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {/*options here*/}
})

3. Customize the notification box by passing the following settings to the opt object. All possible options:

• position: Toast positioning (‘place_top_center’, ‘place_bottom_center’, ‘place_top_left’, ‘place_bottom_left’, ‘place_top_right’, ‘place_bottom_right’, ‘place_center’)
• css: ‘Dark’ = dark theme; ‘Light’ = light theme
• timeOut: Auto dimisses the toast after this timeout
• delay: Time to wait before revealing the toast
• animateIn: Animation name (‘fx_animate_swing’, ‘fx_animate_slideInRight’, ‘fx_animate_slideOutRight’, ‘fx_animate_fadeInBottom’, ‘fx_animate_fadeOutBottom’)
• animateOut: The same as animateIn
• placeAfter: Appends the toast to a specific container
• dismiss: Determine if the toast is dismissable
• icons: Custom icons here

fx.toast.success({
  title:'Success Toast',
  body: 'Any HTML/Plain Text Here',
  opt: {
    position: 'place_top_right',
    css: '',
    timeOut: 10000000,
    delay: 0,
    animateIn: 'fx_animate_slideInRight',
    animateOut: 'fx_animate_slideOutRight',
    placeAfter: false,
    dismiss: true,
    icons: ({
      success: 'fx-icon-check',
      info: 'fx-icon-info',
      warning: 'fx-icon-block',
      error: 'fx-icon-exit'
    })
  }
})