Beautiful notifications and prompts.

Mobile Ready
PNotify works on your phone and tablet. You can swipe notices away to dismiss them.
Unobtrusive
PNotify uses the modalish notification flow to provide unobtrusive support for many notifications at once.
Open Source
PNotify is distributed under the permissive Apache License, Version 2.0.
Get Started with PNotify
Caution warning danger attention!

This is the development site. It demos bleeding edge features that may not work.

Simple Demos These demos only use core PNotify features.

Choose the Styling
PNotify supports multiple styling methods, icon sets, and display modes.
Demo All Styles/Icons
PNotify Core
(Click through to things underneath the notice.)

DOM Element Notice

I'm a notice with a DOM element in it.
Of course it is.
The DOM element is inserted into the notice, so it will be ripped out of the DOM if it is already somewhere else.

How to custom style like this.

To custom style a notice, you can use a styling name like in the demo. For this example, I've used "custom".

Classes with the styling as a prefix get added to various elements for styling. You want your selectors to be more specific than PNotify's selectors, so you can use "[data-pnotify]" to add specificity. This is how the built-in themes work.

Here's the CSS that makes it look like those Growl notices:

[data-pnotify].custom-elem {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  line-height: 1.1;
}
[data-pnotify] .custom-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;
}
[data-pnotify] .custom-title,
[data-pnotify] .custom-text {
  margin-left: 50px;
  color: #FFF;
}
[data-pnotify] .custom-title {
  font-weight: bold;
  font-size: 15px;
}
[data-pnotify] .custom-icon {
  color: #FFA;
}
Stacks Position, order, and group notices. See the main stacks section for even more demos.

Opening previous notices requires PNotify.defaults.destroy = false;
Lifecycle Events Manipulate the notice during its lifecycle.

Module Demos

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.

Mobile Module Notices on mobile phones and tablets.
The Mobile module is added to PNotify.defaultModules on this page, so most of the demos on this page work on mobile.
Countdown Module Give an indication of how much time is left.
Try out the options:
Type
Anchor
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.
Paginate Module Show buttons to let the user page through notices.

Paginate Demo

I'm the context for the paginate demo. I'm here since the Paginate module works best with a certain kind of setup:

  • Max 1 shown notice in the stack.
  • Destroy turned on. (So the count is correct.)
  • Modalish turned off. (Or you can turn off the paginate buttons for just the count.)
Reference Module A reference for when you are coding your own module.

Stacks Position, order, and group notices.

Examples of Custom Stacks
Modalish. Top Left. Moves down, then right. Pushes to stack top.
Modalish. Bottom Left. Moves right, then up. Pushes to stack top.
Modalish. Bottom Right. Moves up, then left. Pushes to stack bottom.
Modeless. Top Center. Moves down. Pushes to stack bottom.
Modal. Centered. Moves up. Pushes to stack top.
Modal. Moves down, then right. Pushes to stack bottom.
Top bar style. Modeless. Moves down, then right. Pushes to stack top.

This demo uses this CSS: 
[data-pnotify].pnotify.stack-bar-top {
  width: 100%;
  border-radius: 0;
}
Bottom bar style. Modalish. Moves up, then right. Pushes to stack bottom.

This demo uses this CSS: 
[data-pnotify].pnotify.stack-bar-bottom {
  width: 70%;
  border-radius: 0;
}
No stack.
Stack Contexts
You can specify a context element for your notices to be placed in.
Modalish (the default):

Modeless:

Modal:

Unpositioned Stack:

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 in a new stack if you want multiple notices to line up. You need to assign the stack to a 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: new PNotify.Stack({dir1: 'down', firstpos1: 25})
});
PNotify.notice({
  text: 'Notice 2.',
  stack: new PNotify.Stack({dir1: 'down', firstpos1: 25})
});
Good - Notices will flow in line. 
const myStack = new PNotify.Stack({dir1: 'down', firstpos1: 25});
PNotify.notice({
  text: 'Notice 1.',
  stack: myStack
});
PNotify.notice({
  text: 'Notice 2.',
  stack: myStack
});

Comments

comments powered by Disqus