Press "Enter" to skip to content

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.

javascript confirm yes no, jquery confirm dialog, custom confirm box in javascript, if confirm javascript, prompt box in javascript

Features:

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

How to make use of it:

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

<script src="fnon.min.js"></script>

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

prompt javascript, dialog box in javascript


See Demo And Download

Official Website(superawdi): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.