Beautiful Notification Plugin - jQuery Pnotify

Pnotify is a customizable, modular, poweful jQuery Notification Plugin that allows you to add beautiful and animated notification windows on your web app.

How to use it:

1. Include the jQuery Pnotify plugin's core JavaScript and Stylesheet on the page.

<link href="pnotify.css" rel="stylesheet">
<link href="pnotify.brighttheme.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="pnotify.js"></script>

2. Include a module of your choice on the page.

• Animate: Animates notifications using Animate.css
• Buttons: Custom buttons
• Callback: Callback functions
• Confirm: Confirmation dialog
• Desktop: Displays the notification even when the web page is not visible
• History: Redisplays old notifications
• Mobile: Optmizes the notifications on mobile & tablet
• Nonblock: Creates non-blocking notifications

<!-- Animate module -->
<script src="pnotify.animate.js"></script>
<!-- Buttons module -->
<link href="pnotify.buttons.css" rel="stylesheet">
<script src="pnotify.buttons.js"></script>
<!-- Callback module -->
<script src="pnotify.callbacks.js"></script>
<!-- Confirm module -->
<script src="pnotify.confirm.js"></script>
<!-- Desktop module -->
<script src="pnotify.desktop.js"></script>
<!-- History module -->
<link href="pnotify.history.css" rel="stylesheet">
<script src="pnotify.history.js"></script>
<!-- Mobile module -->
<link href="pnotify.mobile.css" rel="stylesheet">
<script src="pnotify.mobile.js"></script>
<!-- Nonblock module -->
<script src="pnotify.nonblock.js"></script>

3. Create a basic notification on the page.

$(function(){
  new PNotify({
    title: 'Notification Title',
    text: 'Notification Text'
  });
});

4. Create a basic notification on the page.

$(function(){
  new PNotify({
    // The notice's title.
    title: false,
    // Whether to escape the content of the title. (Not allow HTML.)
    title_escape: false,
    // The notice's text.
    text: false,
    // Whether to escape the content of the text. (Not allow HTML.)
    text_escape: false,
    // What styling classes to use. (Can be either "brighttheme", "bootstrap3", or "fontawesome".)
    styling: "brighttheme",
    // Additional classes to be added to the notice. (For custom styling.)
    addclass: "",
    // Class to be added to the notice for corner styling.
    cornerclass: "",
    // Display the notice when it is created.
    auto_display: true,
    // Width of the notice.
    width: "300px",
    // Minimum height of the notice. It will expand to fit content.
    min_height: "16px",
    // Type of the notice. "notice", "info", "success", or "error".
    type: "notice",
    // Set icon to true to use the default icon for the selected
    // style/type, false for no icon, or a string for your own icon class.
    icon: true,
    // The animation to use when displaying and hiding the notice. "none"
    // and "fade" are supported through CSS. Others are supported
    // through the Animate module and Animate.css.
    animation: "fade",
    // Speed at which the notice animates in and out. "slow", "normal",
    // or "fast". Respectively, 400ms, 250ms, 100ms.
    animate_speed: "normal",
    // Display a drop shadow.
    shadow: true,
    // After a delay, remove the notice.
    hide: true,
    // Delay in milliseconds before the notice is removed.
    delay: 8000,
    // Reset the hide timer if the mouse moves over the notice.
    mouse_reset: true,
    // Remove the notice's elements from the DOM after it is removed.
    remove: true,
    // Change new lines to br tags.
    insert_brs: true,
    // Whether to remove the notice from the global array when it is closed.
    destroy: true,
    // The stack on which the notices will be placed. Also controls the
    // direction the notices stack.
    stack: default_stack
    
  });
});

2018-12-11

This awesome jQuery plugin is developed by sciactive. For more Advanced Usages, please check the demo page or visit the official website.