PNotify

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 underneath the notice.

Completely Open

PNotify is distributed under the permissive Apache License, Version 2.0.

Did you know?

This is the stable site. You can download code here that's tested and proven to work. However, if you like to live dangerously, you can also check out the development site.

Choose the Styling

PNotify supports multiple styling methods and icon sets.

PNotify Core

How to style like Growl.

To custom style a notice, you need to use a class. For this example, we'll use "custom".

Here's some CSS to make custom notices look like Growl:

/* Notice that your selectors need to be more specific than PNotify's selectors. */
[ui-pnotify].ui-pnotify.custom .ui-pnotify-container {
  background-color: #404040;
  background-image: none;
  border: none;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 15px;
  font-size: 15px;
}
[ui-pnotify].ui-pnotify.custom {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  line-height: 1.1;
}
[ui-pnotify].ui-pnotify.custom .ui-pnotify-title,
[ui-pnotify].ui-pnotify.custom .ui-pnotify-text {
  margin-left: 50px;
  color: #FFF;
}
[ui-pnotify].ui-pnotify.custom .ui-pnotify-title {
  font-weight: bold;
  font-size: 15px;
}
[ui-pnotify].ui-pnotify.custom .ui-pnotify-icon {
  color: #FFA;
}

And here's the JavaScript to use this styling:

PNotify.notice({
  title: 'Custom Styling',
  text: 'I have an additional class that\'s used to give me special styling. I always wanted to be pretty.',
  styling: {},
  addClass: 'custom nonblock',
  icon: 'far fa-file-image fa-3x'
});

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

Implements the Web Notifications spec.

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 (Deprecated, Replaced with NonBlock.js) 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 examples:

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 and limit number of notices.

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

Compat Module A backward compatibility module to run PNotify 3 code with PNotify 4.

Check out the Compat demos in IIFE and UMD.

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.

Top Center. Moves down. Pushes to stack bottom.

Really Different Stacks

Modal stack, centered. Moves up. Pushes to stack top.

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.

You also need this CSS:

[ui-pnotify].ui-pnotify.stack-bar-top {
  width: 100%;
}

Bottom bar style. (Like New Microsoft Notification Bars.) Moves up, then right. Pushes to stack bottom.

You also need this CSS:

[ui-pnotify].ui-pnotify.stack-bar-bottom {
  width: 70%;
}

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:

Stack Context

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

You can't just pass an object literal as a stack if you want multiple notices. You need to create a new variable and pass that. This is because PNotify will use that object to store the notices that go into it.

Bad - Notices will overlap.

PNotify.notice({
  text: 'Notice 1.',
  stack: {'dir1':'down', 'firstpos1':25}
});
PNotify.notice({
  text: 'Notice 2.',
  stack: {'dir1':'down', 'firstpos1':25}
});

Good - Notices will flow.

var myStack = {'dir1':'down', 'firstpos1':25};
PNotify.notice({
  text: 'Notice 1.',
  stack: myStack
});
PNotify.notice({
  text: 'Notice 2.',
  stack: myStack
});

Timer

Current Timer:

Consuming the Alert Function

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

Repeat step 1.