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