Alert Dialog, Microsoft-style Notification Library | AST-Notif

AST-Notif is a simple but feature-rich notification library for creating alert dialog, Microsoft-style roar notifications, toaster slices, and Android-style snack bars for the web.

notification popup ui design, notification design examples, ui notifications, website notification design, notification module for the app, notification mobile design

Features:

  • Main alert dialog with customization of buttons, colors, etc.
  • Toast and Snackbar as Android.
  • Notification like Windows 10.
  • You can set various parameters to customize it.

How to make use of it:

1. Put the stylesheet ast-notif.css and JavaScript ast-notif.js on the HTML web page.

<link rel="stylesheet" href="css/ast-notif.css" />
<script src="js/ast-notif.js"></script>

2. Create an alert dialog with AstNotif.dialog() function. Possible parameters:

// AstNotif.dialog(title: string, message: string, options[optional]: object, callbackOK: function, callbackCancel: function);
AstNotif.dialog('Alert Title', 'Alert Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default'
  theme: 'default',
  bgheadcolor: THEMES.DEFAULT.bgcolor,
  bgbodycolor: "white",
  bgfootercolor: "white",
  color: THEMES.DEFAULT.color,
  // Has icons?
  icon: true,
  // Custom icon image
  imgIcon: getCurrentPath().split('/').slice(0, -1).join('/') +'/' + "../img/error_hitam_garis.png",
  // Icon size
  iconSize: "48px",
  // OK button text
  positive: "OK",
  // Cancel button text
  negative: "Cancel",
  // Font awesome class without "fa-"
  fa: "",
  // Efek lebay *special effect
  lebayify: 0
});

3. Create an Android impressed toast message with AstNotif.toast() function.

// AstNotif.toast(message: string, options[optional]: object);
AstNotif.toast('Toast Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default' 
  theme: 'default',
  // Time length, or whatever its called until the toast is gone.
  length: 2000,
  // Background and text color
  bgcolor: THEMES.DEFAULT.color,
  color: THEMES.DEFAULT.bgcolor,
  // Reverse color
  reverseColor: false,
  // Transparency
  alpha: 1,
  // Border radius
  borderRadius: 10,
  // Bottom position, minus for top position
  vdist: 10,
  // Left position
  hdist: 10,
  // Margin
  margin: 10,
  // Position (cardinal point)
  position: "s",
  // Efek lebay *special effect
  lebayify: 0
});

4. Create an Android impressed snack bar with AstNotif.snackbar() function.

AstNotif.snackbar(message: string, options[optional]: object, action/callback: function);
AstNotif.snackbar('Snackbar Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default' 
  theme: 'default',
  // Snack position, either top or bottom.
  position: "bottom",
  // Time length, or whatever its called until the snack is gone.
  length: 2000,
  // Background and text color
  bgcolor: THEMES.DEFAULT.color,
  color: THEMES.DEFAULT.bgcolor,
  // Button color
  btncolor: THEMES.DEFAULT.btncolor,
  // Reverse color
  reverseColor: false,
  // Font awesome class without "fa-"
  fa: "",
  button: "",
  // Efek lebay *special effect
  lebayify: 0
});

5. Create a Microsoft Windows model growl notification with AstNotif.notify() function.

AstNotif.notify(title: string, message: string, footer: string, options[optional]: object, callback: function);
AstNotif.notify('Notify Title', 'Notify Message', {
  // Background and text color
  bgcolor: THEMES.DEFAULT.color,
  color: THEMES.DEFAULT.bgcolor,
  // Using icon?
  icon: true,
  // Custom icon image
  imgIcon: getCurrentPath().split('/').slice(0, -1).join('/') +'/' + "../img/error_putih_garis.png",
  // Font awesome, please strip the "fa-" from the argument
  fa: "",
  // Length the notify object, -1 for stay forever
  length: 2000,
  // Transparency
  alpha: 0.8,
  // Efek lebay *special effect
  lebayify: 0,
  // Position
  position: "right"
});

Options


OptionDescription
colorDialog text color.
Argument: Hex color string or rgb, e.g: “#02BAF2”
bgheadcolorBackground header color.
Argument: Hex color string or rgb, e.g: “#02BAF2”
bgbodycolorBackground body color.
Argument: Hex color string or rgb, e.g: “#02BAF2”
bgfootcolorBackground footer color.
Argument: Hex color string or rgb, e.g: “#02BAF2”
iconWill dialog show icon?
Argument: Booelan, true/false.
imgIconIf dialog icon using image.
Argument: String path e.g: “../your/path/image.png”
iconSizeThe size of the icon.
Argument: Integer. Read as pixel.
positiveDialog button OK.
Argument: String, default: “OK”
negativeDialog button cancel.
Argument: String, default: “cancel”
faSupports font awesome icon.
Argument: Font awesome string, without “fa-“. So “fa-money” is just “money”.
dismissibleEnables user to close the dialog by clicking the backdrop.
Argument: Boolean, default: true

Feature-rich Web Notification Library, AST-Notif Plugin/Github, notification themes


See Demo And Download

Official Website(anandastoon): Click Here

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

Share