PNotify notifications
PNotify is a JavaScript notification library, formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. PNotify supports desktop notifications, modulues, stacks and flexible theming. Desktop notifications are based on the web notifications draft. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, in-browser notice.
Solid color notifications
Primary notice Primary notice. To use, add .bg-primary color class to the plugin configuration options
Danger notice Danger notice. To use, add .bg-danger color class to the plugin configuration options
Success notice Success notice. To use, add .bg-success color class to the plugin configuration options
Warning notice Warning notice. To use, add .bg-warning color class to the plugin configuration options
Info notice Info notice. To use, add .bg-info color class to the plugin configuration options
Custom color notice Notice with custom background color. To use, add custom .bg-* color class to the plugin configuration options
Left icon Solid color notification with left icon. To use, add 'bg-* alert-styled-left' to the addclass: '...' option
Right icon Solid color notification with right icon. To use, add 'bg-* alert-styled-right' to the addclass: '...' option
Basic notifications
Default notice Basic pnotify notification. All notification color styles correspond to the Boostrap's alert component
Danger notice Danger notice. To use, add type: 'error' to the plugin configuration
Success notice Success notice. To use, add type: 'success' to the plugin configuration
Info notice Info notice. To use, add type: 'info' to the plugin configuration
Left positioned icon Notification with left positioned icon. To use, add 'alert-styled-left' to the addclass: '...' option
Right positioned icon Notification with right positioned icon. To use, add 'alert-styled-right' to the addclass: '...' option
Display arrow Display arrow in styled notifications. To use, add 'alert-arrow-left' or '*-right' to the addclass: '...' option
Notice with custom color Notification with custom background/border/text color. Text, background and border color can be changed by adding proper classes to the plugin configuration
Desktop notifications
Default notice 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
Danger notice Danger desktop notification using a custom contextual icon. If permission denied, this icon will be hidden
Success notice Success desktop notification using a custom contextual icon. If permission denied, this icon will be hidden
Warning notice Warning desktop notification using a custom contextual icon. If permission denied, this icon will be hidden
Info notice Info desktop notification using a custom contextual icon. If permission denied, this icon will be hidden
Notification options
No title Notification without title. This is a default option, the title won't be shown if it isn't specified in notification configuration
Rich notice By default notification supports rich content, including typography components, links, icons, buttons etc
Click to close Notification can be closed on a closer button click or on a notification itself via click() event
Form notice Notification with form components. Form is inserted as a DOM object
Sticky notice Sticky notification. To use, add hide: false to the notification configuration
No sticky button Notification with hidden sticky button. To use, add button.sticker: false to the notification config
Permanent buttons By default, notification control buttons appear on hover. To make them always visible, add buttons.closer_hover: false
Permanotice To show permanent notification, make it sticky and hide control buttons
PNotify modules
Confirmation Confirmation dialog with callbacks. To use, add confirm.confirm: true to the notice config
Prompt Prompt dialog with callbacks. To use, add confirm.prompt: true to the notice config
Multi line Multi line prompt dialog with textarea. To use, add prompt_multi_line: true to the notice config
Custom buttons Notification with custom buttons and callbacks
With callbacks Notification callbacks. Available callbacks: before and after init, before and after open, before and after close
Switching notices PNotify supports dynamic notification change. Here notifications are switching using before_close callback
Progress loader Notification with dynamic progressbar. Here before_open callback is used
Dynamic loader Notification with dynamic content. The content changes in a given time interval using update() function
PNotify stacks
Top left Top left stack. Moves down, then right. Pushes to stack top
Bottom left Bottom left stack. Moves right, then up. Pushes to stack top
Bottom right Bottom right stack. Moves up, then left. Pushes to stack bottom
Custom left Left stack with custom position. Moves right, then down. Pushes to stack bottom
Custom right Right stack with custom position. Moves left, then up. Pushes to stack top
Top bar Top bar stack style. Moves down, then right. Pushes to stack top
Bottom bar Bottom bar> stack style. Moves up, then right. Pushes to stack bottom
Login to Continue