Customizable Popup Notification Plugin with jQuery - pop.js

pop.js is a simple-to-use jQuery plugin used to display modal-style, draggable notification popups on your webpage / web application.

How to use it:

1. Add references to jQuery library, pop.min.js and pop.min.css.

<link href="pop.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="pop.min.js"></script>

2. Create a button to toggle the popup window.

<button id="demo">Default Pop Up Demo</button>

3. Bind the click function to the toggle button and create a default popup window with custom title & message.

$("#demo").click(function() {
simplePopup({
  'pop-title':'Popup Title', 
  'pop-body': 'Popup Body', 
  'btn-text': 'Dismiss'
});
});

4. Options available.

// shrink slightly while fading in
'shrink-in': true,

// slide upward slightly while fading in
'slide-in': false,

// slide downward slightly while fading out
'slide-out': false,

// choice between four different color schemes 
// (primary=blue, error=red, success=green, default=grey) 
// for the dismissal button
'btn-style': 'none',

// enable rounded corners
'round-corners': 'true',

// align the contents of the header bar to the setting designated
// left, center, or right
'head-align': 'center',

// align the contents of the popup body to the setting designated
// left, center, or right
'body-align': 'center',

// align the contents of the footer bar to the setting designated
// left, center, or right.
'foot-align': 'center',

// toggle a shaded background on the header bar
'header-bg-shade': false,

// toggle a shaded background on the footer bar.
'footer-bg-shade': false,

// enable draggable
'dragable': true,

// popup title
'pop-title': 'Title Here',

// popup message
'pop-body': 'Body Content Here',

// text for dismiss button
'btn-text': 'OK',

// modifies the text supplied in the 'pop-body'
'auto-break': -1,

// callback
'click-fn': function () {}

---

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