Noty notifications
Noty is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. The API provides lots of other options to customise the text, animation, speed, buttons and much more. It also has various callbacks for the buttons such as opening and closing the notifications and queue control.
Notification layouts
Error notice Error notification. To use, add type: 'error' option to the notification configuration
Success notice Success notification. To use, add type: 'success' option to the notification configuration
Warning notice Warning notification. To use, add type: 'warning' option to the notification configuration
Information notice Info notification. To use, add type: 'info' option to the notification configuration
Alert notice Simple alert layout. To use, add type: 'alert' option to the notification configuration
Confirmation dialog Confirmation dialog with buttons and callbacks. To use, add type: 'confirm' option to the notification configuration
Notification position. Top
Top position Top notification position. To use, add layout: 'top' option to the notification configuration
Top left position Top left notification position. To use, add layout: 'topLeft' option to the notification configuration
Top center position Top center notification position. To use, add layout: 'topCenter' option to the notification configuration
Top right position Top right notification position. To use, add layout: 'topRight' option to the notification configuration
Notification position. Center
Center left position Center left notification position. To use, add layout: 'centerLeft' option to the notification configuration
Center position Center notification position. To use, add layout: 'center' option to the notification configuration
Center right position Center right notification position. To use, add layout: 'centerRight' option to the notification configuration
Notification position. Bottom
Bottom left position Bottom left notification position. To use, add layout: 'bottomLeft' option to the notification configuration
Bottom center position Bottom center notification position. To use, add layout: 'bottomCenter' option to the notification configuration
Bottom right position Bottom right notification position. To use, add layout: 'bottomRight' option to the notification configuration
Bottom position Bottom notification position. To use, add layout: 'bottom' option to the notification configuration
Other examples
Overlay To display a dark page overlay when notification is shown, set modal to true in noty config
Sticky Set timeout option to false to disable timer. Progress bar will be also disabled
Close button By default, notification is closable on click. To use close button instead, use closeWith: ['button'] option
No progress Noty's progressBar option displays a progress bar if timeout is not false. Set to false to disable
Styled To use styled theme, add alert alert-danger alert-styled-left p-0 classes to theme option
Styled white To use styled theme with white background, add alert alert-success alert-styled-left p-0 bg-white classes to theme option
Solid styled To use solid styled theme, add alert bg-info text-white alert-styled-left p-0 classes to theme option
jGrowl notifications
jGrowl is a pretty flexible and easy to use jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works. The idea is simple, deliver notifications to the end user in a noticeable way that doesn't obstruct the work flow and yet keeps the user informed. Supports 6 screen positions, 5 contextual color alternatives and various options.
Solid color notifications
Default notice Basic configuration using theme: 'bg-primary' theme added to the config
Danger notice Danger notification. To use, add theme: 'bg-danger' option to the notification configuration
Success notice Success notification. To use, add theme: 'bg-success' option to the notification configuration
Warning notice Warning notification. To use, add theme: 'bg-warning' option to the notification configuration
Info notice Info notification. To use, add theme: 'bg-info' option to the notification configuration
Notice with left icon Solid color notification with left icon. To use, add 'bg-* alert-styled-left' to the theme option
Notice with right icon Solid color notification with right icon. To use, add 'bg-* alert-styled-right' to the theme option
Custom colors Alert sith custom styles. To use, add 'alert-styled-custom' with other classes to the theme option
Rounded alert Alert with rounded corners. To use, add 'alert-rounded' to the theme option
Basic notification styling
Default notice Default notification style. To use, add theme: 'alert-*' contextual class to the plugin configuration
Left icon Notification with left icon. To use, add 'alert-styled-left' with contextual class to the theme option
Right icon Notification with right icon. To use, add 'alert-styled-right' with contextual class to the theme option
Custom styles Notification with custom color variations of text, border and background
Display arrow Display arrow. To use, add 'alert-arrow-left' or *-right to the theme option
jGrowl options
Sticky notice When set to true a message will stick to the screen until it is intentionally closed by the user
Long life The lifespan of a non-sticky message on the screen. In current example it is 10 seconds
Animation speed The animation speed used to open and close a notification. In current example it is 100ms
Callbacks All callbacks receive the notification's DOM context, the notifications message and it's option object. Check out your console
jGrowl positions
Top left position Top left notification position. To use, add position: 'top-left' option to the notification config
Top center position Top center notification position. To use, add position: 'top-center' option to the notification config
Top right position Top right notification position. To use, add position: 'top-right' option to the notification config
Page center position Center notification position. To use, add position: 'center' option to the notification config
Bottom left position Bottom left notification position. To use, add position: 'bottom-left' option to the notification config
Bottom center position Bottom center notification position. To use, add position: 'bottom-center' option to the notification config
Bottom right position Bottom right notification position. To use, add position: 'bottom-right' option to the notification config