Customizable Plugin for a Notification Bar | jquery.peekABar

Install and Download:

# NPM
$ npm install jquery-peek-a-bar --save

1. add references to the jQuery library and the jQuery peek bar plugin’s stylesheet and JS information within the HTML web page.

<link href="/path/to/dist/jquery.peekabar.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script> 
<script src="/path/to/dist/jquery.peekabar.min.js"></script> 

2. Display a default notification bar on your net web page.

var defaultBar = new $.peekABar();
defaultBar.show();

3. Pass the customization options to the default bar.

var defaultBar = new $.peekABar({

    // custom html content
    html: 'Your Message Here',

    // for autohide option
    delay: 3000,

    // auto hide after a timeout
    autohide: false,

    // padding
    padding: '1em',

    // background color
    backgroundColor: 'rgb(195, 195, 195)',

    animation: {

      // slide or fade
      type: 'slide',

      // animation speed
      duration: 'slow'

    },

    // additional CSS class
    cssClass: null,

    // CSS opacity
    opacity: '1',

    // top or bottom
    position: 'top',

    // Close the bar by clicking on it.
    closeOnClick: false

});

4. Callback features.

var defaultBar = new $.peekABar({
    
    // Called after the bar is shown.
    onShow: function() {},

    // Called after the bar is hidden.
    onHide: function() {},

});

5. The technique to cover the notification bar.

defaultbar.hide();

Simple Customizable jQuery Notification Bar Plugin, jquery.peekABar Github, jquery notification popup codepen, jquery notification bubble, best alert message jquery

See Demo And Download