Notiflix is the JavaScript library of client-side unblocked notifications, popups, load indicators, and more that makes your web projects so much better. Notiflix is a versatile, highly effective, and customizable notification popup library that sends various kinds of notification messages to the consumer.
js notification popup, notiflix cdn, jquery notification bubble, html notification popup, notiflix github, notiflix npm, alert popup design
Features:
- Toast-like alert notifications:Â Success, Failure, Warning, and Info.
- Confirmation popup packing containers.
- Report dialog packing containers:Â Success, Failure, Warning, and Info.
- 6 loading indicators:Â Standard, Hourglass, Circle, Arrows, Dots, and Pulse.
How to make use of it:
Installation:
# Yarn $ yarn add notiflix # NPM $ npm install notiflix --save
Load the required JavaScript and CSS records data within the doc.
<link rel="stylesheet" href="notiflix-version.min.css" /> <script src="notiflix-version.min.js"></script>
Create an alert notification.
Notiflix.Notify.Init({ width: '280px', position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' && v2.2.0 and the next versions => 'center-top' - 'center-bottom' - 'center-center' distance: '10px', opacity: 1, borderRadius: '5px', rtl: false, timeout: 3000, messageMaxLength: 110, backOverlay: false, backOverlayColor: 'rgba(0,0,0,0.5)', plainText: true, showOnlyTheLastOne: false, clickToClose: false, ID: 'NotiflixNotify', className: 'notiflix-notify', zindex: 4001, useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false" fontFamily: 'Quicksand', fontSize: '13px', cssAnimation: true, cssAnimationDuration: 400, cssAnimationStyle: 'fade', // 'fade' - 'zoom' - 'from-right' - 'from-top' - 'from-bottom' - 'from-left' closeButton: false, useIcon: true, useFontAwesome: false, fontAwesomeIconStyle: 'basic', // 'basic' - 'shadow' fontAwesomeIconSize: '34px', success: background: '#32c682', textColor: '#fff', childClassName: 'success', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-check-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(50,198,130,0.2)', // v2.2.0 and the subsequent versions , failure: background: '#ff5549', textColor: '#fff', childClassName: 'failure', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-times-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(255,85,73,0.2)', // v2.2.0 and the next versions , warning: background: '#eebf31', textColor: '#fff', childClassName: 'warning', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-exclamation-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(238,191,49,0.2)', // v2.2.0 and the next versions , info: background: '#26c0d3', textColor: '#fff', childClassName: 'info', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-info-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(38,192,211,0.2)', // v2.2.0 and the next versions }); // or Notiflix.Notify.Success('Success message'); Notiflix.Notify.Failure('Failure message'); Notiflix.Notify.Warning('Warning message'); Notiflix.Notify.Info('Info message '); Notiflix.Notify.Success('Success message', function(){ // Callback });
Create an affirmation dialog.
Notiflix.Confirm.Init(); // or Notiflix.Confirm.Show('Confirm Title','Confirm Message','Ok Button Text'); // with callbacks Notiflix.Confirm.Show( 'Confirm Title', 'Confirm Message', 'Ok Button Text', 'Cancel Button Text', function() // yes callback , function(){ // no } );
Create a report dialog.
Notiflix.Report.Init({ className: 'notiflix-report', width: '320px', backgroundColor: '#f8f8f8', borderRadius: '25px', rtl: false, zindex: 4002, backOverlay: true, backOverlayColor: 'rgba(0,0,0,0.5)', useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false" fontFamily: 'Quicksand', svgSize: '110px', plainText: true, titleFontSize: '16px', titleMaxLength: 34, messageFontSize: '13px', messageMaxLength: 400, buttonFontSize: '14px', buttonMaxLength: 34, cssAnimation: true, cssAnimationDuration: 360, cssAnimationStyle: 'fade', // 'fade' - 'zoom' success: , failure: svgColor: '#ff5549', titleColor: '#1e1e1e', messageColor: '#242424', buttonBackground: '#ff5549', buttonColor: '#fff', backOverlayColor: 'rgba(255,85,73,0.2)', // v2.2.0 and the next versions , warning: svgColor: '#eebf31', titleColor: '#1e1e1e', messageColor: '#242424', buttonBackground: '#eebf31', buttonColor: '#fff', backOverlayColor: 'rgba(238,191,49,0.2)', // v2.2.0 and the next versions , info: svgColor: '#26c0d3', titleColor: '#1e1e1e', messageColor: '#242424', buttonBackground: '#26c0d3', buttonColor: '#fff', backOverlayColor: 'rgba(38,192,211,0.2)', // v2.2.0 and the next versions , }); // or Notiflix.Report.Success('Title','Success Message','Button Text'); Notiflix.Report.Failure('Title','Failure Message','Button Text'); Notiflix.Report.Warning('Title','Warning Message','Button Text'); Notiflix.Report.Info('Title','Info Message','Button Text'); // with a callback Notiflix.Report.Success( 'Success Title', 'Success Message', 'Button Text', function(){ // callback });
Create a loading indicator.
Notiflix.Loading.Init( className: 'notiflix-loading', zindex: 4000, backgroundColor: 'rgba(0,0,0,0.8)', rtl: false, useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false" fontFamily: 'Quicksand', cssAnimation: true, cssAnimationDuration: 400, clickToClose: false, customSvgUrl: null, svgSize: '80px', svgColor: '#32c682', messageID: 'NotiflixLoadingMessage', messageFontSize: '15px', messageMaxLength: 34, messageColor: '#dcdcdc', ); // or Notiflix.Loading.Standard(); Notiflix.Loading.Hourglass(); Notiflix.Loading.Circle(); Notiflix.Loading.Arrows(); Notiflix.Loading.Dots(); Notiflix.Loading.Pulse(); // with custom loading text Notiflix.Loading.Standard('Loading...'); // remove Notiflix.Loading.Remove(); // remove after delay Notiflix.Loading.Remove(2000); // use a custom loading spinner Notiflix.Loading.Init({ customSvgUrl:'icon.svg', svgSize:'80px' }); Notiflix.Loading.Custom();
Create a block type loading indicator that can be utilized to dam or unblock components.
Notiflix.Block.Init(); // With message Notiflix.Block.Standard('.block-this-element', 'Loading...'); Notiflix.Block.Hourglass('.my-element', 'Processing...');N otiflix.Block.Circle('div#Modal', 'Please wait...'); // Without message messageNotiflix.Block.Arrows('div#PopUp'); Notiflix.Block.Dots('table#MyTable'); Notiflix.Block.Pulse('.report-wrapper'); // Remove Notiflix.Block.Remove('div#Modal'); Notiflix.Block.Remove('div#Modal', 600);
Global settings.
Notiflix.Notify.Init({ wrapID: 'NotiflixNotifyWrap', // can not customizable width: '280px', position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' && v2.2.0 and the next versions => 'center-top' - 'center-bottom' - 'center-center' distance: '10px', opacity: 1, borderRadius: '5px', rtl: false, timeout: 3000, messageMaxLength: 110, backOverlay: false, backOverlayColor: 'rgba(0,0,0,0.5)', plainText: true, showOnlyTheLastOne: false, clickToClose: false, ID: 'NotiflixNotify', className: 'notiflix-notify', zindex: 4001, useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false" fontFamily: 'Quicksand', fontSize: '13px', cssAnimation: true, cssAnimationDuration: 400, cssAnimationStyle: 'fade', // 'fade' - 'zoom' - 'from-right' - 'from-top' - 'from-bottom' - 'from-left' closeButton: false, useIcon: true, useFontAwesome: false, fontAwesomeIconStyle: 'basic', // 'basic' - 'shadow' fontAwesomeIconSize: '34px', success: background: '#32c682', textColor: '#fff', childClassName: 'success', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-check-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(50,198,130,0.2)', // v2.2.0 and the next versions , failure: background: '#ff5549', textColor: '#fff', childClassName: 'failure', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-times-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(255,85,73,0.2)', // v2.2.0 and the next versions , warning: background: '#eebf31', textColor: '#fff', childClassName: 'warning', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-exclamation-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(238,191,49,0.2)', // v2.2.0 and the next versions , info: background: '#26c0d3', textColor: '#fff', childClassName: 'info', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-info-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(38,192,211,0.2)', // v2.2.0 and the next versions , });
Notiflix Documentation, Notiflix Plugin/Github
See Demo And Download
Official Website(notiflix): Click Here
This superior jQuery/javascript plugin is developed by notiflix. For extra Advanced Usages, please go to the official website.
Be First to Comment