Clean Customizable Notification Popup Plugin - jQuery Notify

A lightweight yet customizable, non-blocking jQuery notification plugin for creating permanent or toast (temporary) notification popups on top of the webpage.

Features:

• Auto dismisses after a timeout.
• Can be placed anywhere on the webpage.
• Allows HTML content.
• Custom icon fonts.
• Callback functions.

How to use it:

1. To get started, import jQuery library and the jQuery Notify plugin's files into the html page.

<link href="notify.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="jquery.notify.js"></script>

2. Create a toast-like notification popup that will auto close after 5 seconds.

$.notify({
  title: 'Notification Title', 
  content: 'Notification Content', 
  timeout: 5000
});

3. Create a permanent notification popup that can only be manually closed.

$.notify({
  title: 'Notification Title', 
  content: 'Notification Content', 
  timeout: 0
});

4. Change the position of the notification popup should appear. Possible position options:

• top-left
• top-right (default)
• bottom-left
• bottom-right

$.notify({
  title: 'Notification Title', 
  content: 'Notification Content', 
  position:'top-right'
});

5. More customization options.

$.notify({
  title: 'Notification Title', 
  content: 'Notification Content', 
  className: 'el-notification',
  useHTML: false, // uses html
  icon:'', // custom icons
  iconType: 'success',
  closeIcon: 'el-default-close-btn',
  closable: true, // is closable?
  offset: 16, // in pixels
  url:'' // url
});

6. Callback functions that will be triggered in case the notification popup is clicked or closed.

$.notify({
  onClose:null,
  onClick:null
});

---

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