A Simple Notification Box Using Vanilla JavaScript | Foxx.js

Foxx JS is a JavaScript library of customizable and easily reusable utility UI components. Foxx.js is a Vanilla JS plugin to create reusable and customizable toast-like notification boxes in 4 modes: Success, Information, Warning, and Error.

javascript toast notification, javascript simple notification, toastify js, side notification bar in html, javascript notification library, vanilla toast js

How to make use of it:

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

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

2. Create toast notification containers on the web 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 field bypassing the next settings to the opt object.

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'
    })
  }
})

Reusable Toast-like Notification Box In Vanilla JavaScript, Foxx JS Plugin/Github

See Demo And Download

Official Website(Codecherub): Click Here

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