PNotify

Beautiful JavaScript notifications.

Download PNotify 3 PNotify on GitHub GitHub Icon
Using PNotify Bug Report/Feature Request

About

PNotify is a JavaScript notification system, developed by SciActive.

PNotify provides desktop notifications based on the Web Notifications spec. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, in-browser notice.

Mobile Ready

PNotify works on your phone and tablet. You can swipe notices away to dismiss them.

Unobtrusive

PNotify can provide non-blocking notices that allow the user to click elements behind the notice without even having to dismiss it.

See All Features

Themeable

PNotify can use Bootstrap or jQuery UI themes. Try out some of the readymade themes using the selector in the top right corner of this page.

Completely Open

PNotify is distributed under the Apache License, Version 2.0.

 

Choose the Styling

PNotify supports three styling methods and three popular icon sets.

PNotify Core






How to style like Growl.

Implements the Web Notifications spec.

Desktop Module Notifications that display even when the web page is not visible.

The first time you click one of these buttons, you will be asked to grant permission for this site to show notices. Then you can click them again to see the desktop notification.

If your browser doesn't support Web Notifications, or you deny permission to show them, you will only see regular in-browser notices. You can check here.


Buttons Module Sticker and a closer buttons.

Since the Buttons module provides buttons by default, many of the demos on this page include the buttons.

NonBlock Module Click through to things underneath the notice.

Mobile Module Notices on mobile phones and tablets.

Since the Mobile module provides support by default, most of the demos on this page work on mobile.

Animate Module Fluid CSS animations using Animate.css.

Some good looking presets:


Or build your own:
Effect in Effect out


Attention seekers:

Confirm Module Confirmation dialogs and prompts.

Callbacks Module Manipulate the notice during its lifecycle.

History Module Redisplay old notices.

Reference Module A reference for when you are coding your own module.

Examples of Custom Stacks


Top Left. Moves down, then right. Pushes to stack top.
Bottom Left. Moves right, then up. Pushes to stack top.
Bottom Right. Moves up, then left. Pushes to stack bottom.
Custom. Moves right, then down. Pushes to stack bottom.
Custom. Moves left, then up. Pushes to stack top.

Really Different Stacks

Modal stack. Moves down, then right. Pushes to stack top.
Top bar style. (Like Old Microsoft Notification Bars.) Moves down, then right. Pushes to stack top.
Bottom bar style. (Like New Microsoft Notification Bars.) Moves up, then right. Pushes to stack bottom.
Tooltip

Stack Contexts

By default, a stack will place its notices underneath the body node. You can also specify a context for your notices to be placed in.





Modal:



I'm the stack context where notices will be placed. I'm position: relative, so the notices will be positioned relative to me. My overflow is set to auto, so the notices won't show beyond my borders.

Happy face

Timer

Current Timer: 8 seconds

Consuming the Alert Function

This isn't really a feature of PNotify, but it's cool.
  1. Repeat step 1.