How to Create Notification, Loading Indicator, Alert&Confirm Dialog with JavaScript - Fnon

Fnon is a client-side JavaScript library for forms, upload indicators, notifications, and alerts making your web projects so much better. Multifunctional popup box library for creating toast notifications, alert/affirm dialog containers, and numerous sorts of loading indicators on the web app.

Features:

5 superior animations.
7 built-in themes.
16 loading indicator types.
Fully customizable.
Written in Vanilla JavaScript.

Install & Import

To start with, insert the Fnon’s JavaScript and Stylesheet into the HTML.

Create an alert dialog with the Fnon.Alert.Theme technique.

Fnon.Alert.Light('Alert Message','Alert Title','Ok Button',()=>{
  // callback
});
Fnon.Alert.Dark('Alert Message','Alert Title','Ok Button',()=>{
  // callback
});
Fnon.Alert.Primay('Alert Message','Alert Title','Ok Button',()=>{
  // callback
});
Fnon.Alert.Success('Alert Message','Alert Title','Ok Button',()=>{
  // callback
});
Fnon.Alert.Danger('Alert Message','Alert Title','Ok Button',()=>{
  // callback
});
Fnon.Alert.Warning('Alert Message','Alert Title','Ok Button',()=>{
  // callback
});
Fnon.Alert.Info('Alert Message','Alert Title','Ok Button',()=>{
  // callback
});
// or
Fnon.Alert.Light({
     title:'Alert Message',
     message:'Alert Title',
     callback:()=>{
       // callback
     }
});

Override the default alert settings.

Fnon.Alert.Init({
    message: '',
    title: '',    
    titleColor: GColors.Dark,
    titleBackground: GColors.Light,
    color: '#2b2b2b',
    background: 'rgba(0, 0, 0, 0.1)',
    fontFamily: '"Quicksand", sans-serif',
    width: 'nl', // sm, lg, nl, xl
    closeButton: true,
    animation: 'slide-top', // 'fade', 'slide-top', 'slide-bottom', 'slide-right' and 'slide-left'
    closeButton: false,
    callback: undefined,
    icon: undefined,
    iconColor: '#000',
    showIcon: false,
    btnOkText: 'Ok',
    btnOkColor: '#d4d4d4',
    btnOkBackground: '#d4d4d4',
    btnOkShadow: 'rgba(0, 0, 0, 0.2)',
    btnOkBorderColor: '#d4d4d4',
    zIndex:4000,
    // Functions
    beforeShow: undefined,
    afterShow: undefined,
});

Create an affirmation dialog with the Fnon.Ask.Theme technique.

Fnon.Ask.Light('Confirm Message','Confirm Title','Ok Button', 'Cancel Button', (result)=>{
  // callback
});
Fnon.Ask.Dark('Confirm Message','Confirm Title','Ok Button', 'Cancel Button', (result)=>{
  // callback
});
Fnon.Ask.Primay('Confirm Message','Confirm Title','Ok Button', 'Cancel Button', (result)=>{
  // callback
});
Fnon.Ask.Success('Confirm Message','Confirm Title','Ok Button', 'Cancel Button', (result)=>{
  // callback
});
Fnon.Ask.Danger('Confirm Message','Confirm Title','Ok Button', 'Cancel Button', (result)=>{
  // callback
});
Fnon.Ask.Warning('Confirm Message','Confirm Title','Ok Button', 'Cancel Button', (result)=>{
  // callback
});
Fnon.Ask.Info('Confirm Message','Confirm Title','Ok Button', 'Cancel Button', (result)=>{
  // callback
});
// or
Fnon.Ask.Light({
     title:'Confirm Message',
     message:'Confirm Title',
     callback:(result)=>{
       // callback
     }
});

Override the default confirm settings.

Fnon.Ask.Init({
  fontFamily: defaultFont,
  width: 'nl', // sm//lg//nl//xl
  closeButton: true,
  animation: 'slide-top',//'fade', 'slide-top', 'slide-bottom', 'slide-right' and 'slide-left'
  closeButton: false,
  callback: undefined,
  icon: undefined,
  iconColor: '#fff',
  showIcon: false,
  message: '',
  title: '',
  titleColor: '#fff',
  titleBackground: '#fff',
  btnOkText: 'Ok',
  btnOkColor: '#fff',
  btnOkBackground: '#fff',
  btnOkShadow: 'rgba(0, 0, 0, 0.2)',
  btnOkBorderColor: '#d4d4d4',
  btnCancelText: 'Cancel',
  btnCancelColor: '#fff',
  btnCancelBackground: '#fff',
  btnCancelShadow: 'rgba(0, 0, 0, 0.1)',
  btnCancelBorderColor: '#d4d4d4',
  color: '#2b2b2b',
  background: 'rgba(0, 0, 0, 0.1)',
  zIndex:4000,
  // Functions
  beforeShow: undefined,
  afterShow: undefined,
});

Create a standard dialog with the Fnon.Dialogue.Theme technique.

Fnon.Dialogue.Light('Dialogue Message','Dialogue Title','Ok Button', 'Cancel Button', (closer,html)=>{
  // callback
});
Fnon.Dialogue.Dark('Dialogue Message','Dialogue Title','Ok Button', 'Cancel Button', (closer,html)=>{
  // callback
});
Fnon.Dialogue.Primay('Dialogue Message','Dialogue Title','Ok Button', 'Cancel Button', (closer,html)=>{
  // callback
});
Fnon.Dialogue.Success('Dialogue Message','Dialogue Title','Ok Button', 'Cancel Button', (closer,html)=>{
  // callback
});
Fnon.Dialogue.Danger('Dialogue Message','Dialogue Title','Ok Button', 'Cancel Button', (closer,html)=>{
  // callback
});
Fnon.Dialogue.Warning('Dialogue Message','Dialogue Title','Ok Button', 'Cancel Button', (closer,html)=>{
  // callback
});
Fnon.Dialogue.Info('Dialogue Message','Dialogue Title','Ok Button', 'Cancel Button', (closer,html)=>{
  // callback
});
// or
Fnon.Dialogue.Light({
     title:'Dialogue Message',
     message:'Dialogue Title',
     callback:(closer,html)=>{
       return false;
       closer();
     }
});

Override the default dialog settings.

Fnon.Ask.Init({
  fontFamily: defaultFont,
  width: 'nl', // sm//lg//nl//xl
  closeButton: true,
  animation: 'slide-top',//'fade', 'slide-top', 'slide-bottom', 'slide-right' and 'slide-left'
  closeButton: false,
  callback: undefined,
  icon: undefined,
  iconColor: '#fff',
  showIcon: false,
  message: '',
  title: '',
  titleColor: '#fff',
  titleBackground: '#fff',
  btnOkText: 'Ok',
  btnOkColor: '#fff',
  btnOkBackground: '#fff',
  btnOkShadow: 'rgba(0, 0, 0, 0.2)',
  btnOkBorderColor: '#d4d4d4',
  btnCancelText: 'Cancel',
  btnCancelColor: '#fff',
  btnCancelBackground: '#fff',
  btnCancelShadow: 'rgba(0, 0, 0, 0.1)',
  btnCancelBorderColor: '#d4d4d4',
  color: '#2b2b2b',
  background: 'rgba(0, 0, 0, 0.1)',
  zIndex:4000,
  // Functions
  beforeShow: undefined,
  afterShow: undefined,
});

Create a toast like notification popup with the Fnon.Hint.Theme technique.

Fnon.Hint.Light('Alert Message', {
  callback:function(){
  // callback
  }
});
Fnon.Hint.Dark('Alert Message', {
  callback:function(){
  // callback
  }
});
Fnon.Hint.Primay('Alert Message', {
  callback:function(){
  // callback
  }
});
Fnon.Hint.Success('Alert Message', {
  callback:function(){
  // callback
  }
});
Fnon.Hint.Danger('Alert Message', {
  callback:function(){
  // callback
  }
});
Fnon.Hint.Warning('Alert Message', {
  callback:function(){
  // callback
  }
});
Fnon.Hint.Info('Alert Message', {
  callback:function(){
  // callback
  }
});

Override the default notification settings.

Fnon.Hint.Init({
  fontFamily:'"Quicksand", sans-serif',
  position: 'right-top', // 'right-top', 'right-center', 'right-bottom', 'left-top', 'left-center', 'left-bottom', 'center-top', 'center-center', 'center-bottom'
  spacing: '16px',
  svgSize: { w: '16px', h: '16px' },
  textColor: '#fff',
  fontSize: '14px',
  backgroundColor: '#029eff',
  shadowColor: 'rgba(2, 158, 255, 0.3)',
  width: '300px',
  zindex: 4000,
  animation: 'slide-left', //'fade', 'slide-top', 'slide-bottom', 'slide-right' and 'slide-left'
  animationDuration: 500,
  displayDuration: 3000,
  progressColor: 'rgba(255,255,255,0.9)',
  callback:undefined,
});

Create a fullscreen loading indicator with the Fnon.Wait.Theme technique.

Fnon.Wait.Infinity();
Fnon.Wait.Ripple('Custom Loading Text'); 
Fnon.Wait.Liquid('Please Wait',{
  // options here
}); 
// more loading indicator styles
Fnon.Wait.ColorBar();
Fnon.Wait.ProgressBar();
Fnon.Wait.CurveBar();
Fnon.Wait.LineDots();
Fnon.Wait.Circle();
Fnon.Wait.CircleDots();
Fnon.Wait.Bricks();
Fnon.Wait.Interwind();
Fnon.Wait.Typing(); 
Fnon.Wait.Gear();
Fnon.Wait.Gears();
Fnon.Wait.Rainbow();
Fnon.Wait.CurveBar();
// update loading text
Fnon.Wait.Change('Downloading 77%');
// remove
Fnon.Wait.Remove();
// remove after 3 seconds
Fnon.Wait.Remove(5000);

Override the default loading indicator settings.

Fnon.Wait.Init({
  fontFamily:'"Quicksand", sans-serif',
  svgSize: { w: '100px', h: '100px' },
  svgColor: '#029eff',
  textColor: '#029eff',
  textSize: '16px',
  clickToClose: false,
  background: 'rgba(255,255,255,0.5)',
  zindex: 4000,
  containerSize: '350px'
});