Cookie Based Notification Popup with jQuery and CSS3 - biscuit.js

biscuit.js is a jQuery plugin that uses jQuery cookie plugin to detect the cookies and display various types of notification messages with cool CSS3 animations on your webpage / web app.

Features:

• 19+ cool CSS3 animations based on Nifty Modal Window Effects.
• Auto dismiss after a specified timeout.
• Custom message text, icons, etc.
• 6 types of notifications: default, debug, info, error, success, warning.
• Supports desktop notification.
• 2 built-in themes: default and dark.
• Useful API to full control over the plugin.

See also:

• Cookie Based Modal Popup Plugin For jQuery - Popup Window
• Create Cookie Based Popup Messages using jQuery - Flash Messages

Basic usage:

1. Include jQuery library and other required JavaScript files in your web page.

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.cookie.min.js"></script>
<script src="src/biscuit.js"></script>

2. Include the biscuit.css for basic notification styles.

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

3. Include the effects.css for amazing CSS3 powered notification animations.

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

4. Include the Font Awesome 4 for default notification icons.

<link rel="stylesheet" href="font-awesome.min.css">

5. Create a notification container.

<div class="messages"></div>

6. Setup your notification messages.

$(".messages").biscuit({
  'messages' :[
      {

        // custom message messages
        'text'  : 'This is a non-persistent message', 

        // default, debug, info, error, success, warning
        'level' : 'info', 

        // CSS3 animations. See the effects.css
        // From biscuit-effect-1 to biscuit-effect-19
        'effect': 'biscuit-effect-9', 

        // Determines if the message should be persistent across pages
        'persistent': false
      },
      {
       'text'  : 'This is a dark error message', 
       'level' : 'error', 
       'effect': 'biscuit-effect-6', 
       dark_theme: true
      },
      {
        'text'  : 'This is a normal error message', 
        'level' : 'error', 
        'effect': 'biscuit-effect-6'
      },
      {
        'text'  : 'This is a normal success message with a <a href="#">link</a>', 
        'level' : 'success', 
        'id': 'custom_id', 
        'show_minimize_icon': false
      }
  ],
  'desktop_notifications': false,
  'show_icon': true,

  // Custom notification icons.
  'icon': 'info_icon.png',
});

7. Show the notifications using 'display' method.

$(".messages").biscuit("display");

8. Full default settings.

'delay'                         : 500,
'text_show_delay'               : 200,
'text'                          : '',
'level'                         : 'info',
'effect'                        : 'biscuit-effect-1',
'path'                          : '/',
'icon'                          : '',
'dark_theme'                    : false,
'show_icon'                     : true,
'show_minimize_icon'            : true,
'no_duplicates'                 : true,
'persistent'                    : true,
'desktop_notifications'         : false,
'desktop_notification_timeout'   : 5000

8. Public methods.

// Removes all messages from cookie and display
$('.messages').biscuit('remove_all');   

// Hides all messages
$('.messages').biscuit('hide_all');     

// Shows all messages
$('.messages').biscuit('show_all');     

// Returns all of the message elements in the main container
$('.messages').biscuit('get_messages');

// Destroy
$('.messages').biscuit('destroy'); 

// Shows the message
$('#custom_id').biscuit('show');     

// Hides the message          
$('#custom_id').biscuit('hide');          

// Removes the message from cookie but keeps in display     
$('#custom_id').biscuit('remove_from_cookie'); 

9. onhide and onremove callbacks

$('#custom_id').on('message_remove', function(data){
  console.log('A message was removed');
});

$('#custom_id').on('message_hide', function(data){
  console.log('A message is hidden');
});

---

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