Displaying Alerts, Popups with Customizable Features | Toastifier


Toastifier is a simple, lightweight, and easy-to-use npm package for displaying alerts and popups with some customizable features like animation, theme, style, etc. Toastifier is a popup JavaScript library inspired by Material Toasts. It can be used with any framework/library built with JS.

customize javascript alert box css, javascript alert box formatting, toast notification jquery, jquery alert message, attractive alert box in javascript, html tags in javascript alert box


  • Automatic rejection
  • 4 types of alerts: error, success, warning, information.
  • 4 fancy animations: flip, bounce, fade-in, zoom in / out.
  • Pause the countdown timer when hovering over the mouse.
  • OnClick function.
  • Custom patterns.
  • With or without icons.

How to make use of it:

1. Install and import the Toastifier.

# Yarn
$ yarn add toastifier

$ npm i toastifier
import 'toastifier/dist/toastifier.min.css';
import toastifier from 'toastifier';

2. Show a fundamental alert popup on the display screen.

toastifier('Basic Alert');

3. Set the notification type:

toastifier('Alert Message Here',{
  type: 'warn'

4. Set the animation type:

toastifier('Alert Message Here',{
  animation: 'flip'

5. Set the position of the alert popups.

toastifier('Alert Message Here',{
  position: 'top-left'

6. Set the duration of the animation.

toastifier('Alert Message Here',{
  duration: 5000

7. Determine whether or not to pause the countdown timer on hover.

toastifier('Alert Message Here',{
  onhoverPause: true

8. Determine whether or not to indicate the icon within the alert popup.

toastifier('Alert Message Here',{
  showIcon: true

9. Trigger a function when the user clicks the alert popup.

toastifier('Alert Message Here',{
  onClick: function(){
    // ...

10. More choices to customize the alert popups.

toastifier('Alert Message Here',{

  // additional CSS rules here
  styleClass: {},

  // background color
  background: '#222'

  // text color
  text: '#fff'

  // border property
  border: '1px solid #222',

  // show box shadow
  shadow: true,

Simple Alert Popup, Toastifier Plugin/Github, show message instead of alert in javascript, custom alert javascript


See Demo And Download

Official Website(varun-singhh): Click Here

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