Small jQuery Notification Popup Plugin - Notice

File Size: 15.3 KB
Views Total: 403
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Small jQuery Notification Popup Plugin - Notice

Notice is a small, fast, cross-browser jQuery plugin that displays sticky or auto-dismissable notification popups in the bottom right of your webpage.

How to use it:

1. Import the required jQuery notice plugin's stylesheet in the head section.

<link rel="stylesheet" href="src/jquery.notice.css">

2. Import jQuery library and the jQuery notice plugin's script at the bottom of the webpage.

<script src="jquery.min.js"></script>
<script src="src/jquery.notice.js"></script>

3. Displays a 'sticky' notification that always stays on your webpage. You can click the 'x' button to close it manually.

// notice(MESSAGE,OPTION)
notice('Your Message Here',{

  // high, normal or low
  priority: 'high',

  // is it sticky?
  stick: true,

  // callback
  callback: function(){}
  
});

4. Displays a 'normal' notification that auto dismisses after a specified timeout.

// notice(MESSAGE,OPTION)
notice('Your Message Here',{

  // alignment
  align: 'bottom right',

  // rounded or square
  shape: 'rounded',

  // transition delay
  delay: 2000,

  // animation speed
  speed: 1000,

  // high, normal or low
  priority: 'low',

  // is it sticky?
  stick: false,

  // the link you want to jump to
  // e.g. 'https://www.jqueryscript.net'
  url: null,

  // callback
  callback: function(){}

});

Change log:

2015-07-09

  • v0.5

2015-07-07

  • added more config options
  • update styles.

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