Powerful Grown Notifications Plugin

Beautiful UI, Easy to install

Get It For Free

Live Demo

Features

  • Customizable CSS-based UI
  • Lightweight, at around 18KB minified (or ~5KB minified + gzipped)
  • Zero dependencies (not even jQuery)
  • Supports IE11+, Safari, Google Chrome, Yandex Browser, Opera, Firefox
  • Light, dark and colored predefined themes

Documentation

Installation

<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="dist/light-theme.min.css">
  </head>
  <!-- ... -->
  <body>
    <!-- ... -->
    <script src="dist/growl-notification.min.js"></script>
  </body>
</html>

Getting Started

GrowlNotification.notify({
    title: 'This is title',
    description: 'My Description'
});

Growl Notification Options

GrowlNotification.notify({
    margin: 20,
    type: 'default',
    title: '',
    description: '',
    image: {
        visible: false,
        customImage: ''
    },
    closeTimeout: 0,
    closeWith: ['click', 'button'],
    animation: {
        open: 'slide-in',
        close: 'slide-out'
    },
    animationDuration: .2,
    position: 'top-right',
    showBorder: false,
    showButtons: false,
    buttons: {
        action: {
            text: 'Ok',
            callback: function() {}
        },
        cancel: {
            text: 'Cancel',
            callback: function() {}
        }
    },
    showProgress: false
});

Available Options

Option Default Info
width: number|string null Custom width for notification 100px, 50% and etc.
zIndex: number 1056 Custom z-index for notifications
type: string 'default' default, success, error, warning, info
position: string 'top-right' top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
title: string '' This string can contain HTML too. But be careful and don't pass user inputs to this parameter.
description: string '' This string can contain HTML too. But be careful and don't pass user inputs to this parameter.
image.visible: boolean false Show/Hide image
image.customImage: string '' Path to custom image
closeTimeout: boolean,int false false, 1000, 3000, 3500, etc. Delay for closing event in milliseconds (ms). Set 'false' for sticky notifications.
closeWith: [...string] ['click'] click, button
animation.open: string,null,false 'slide-in' If string, assumed to be CSS class name. If false|null|'none', no animation at all. 'slide-in', 'fade-in'
animation.close: string,null,false 'slide-out' If string, assumed to be CSS class name. If false|null|'none', no animation at all. 'slide-out', 'fade-out'
showButtons: true,false false Show or hide buttons
buttons: object - Buttons configuration
showProgress: true,false false Show or hide progress bar

Methods

Name Description Example
show Displays the growl notification growlNotification.show()
hide Hides the growl notifications growlNotification.hide()
GrowlNotification.setGlobalOptions: object {} Set global options for all notifications
GrowlNotification.closeAll - Close all notifications

Need Custom Growl Notifications?