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
Warning notice
Warning notice. To use, add type: 'warning' 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
