#needPopup 1.0.0 ##Do you need ease to use, clean and light popup? Here you go!

###Short facts

• Fully responsive
• Show any element in the popup just with data attribute
• Several options and callbacks
• Overwritting styles is not pain, cause there are little ammount of them
• Realy lightweight
• Browsers: Firefox, Chrome, Safari, iOS, Android, IE8+

Written by: Dzmitry Vasileuski

###License Released under the MIT license - http://opensource.org/licenses/MIT

##Getting started

###Step 1: Add required files from dist directory

First of all the jQuery library needs to be included. Next, download the package from this repository and include needpopup.min.js and needpopup.min.css.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- needPopup Javascript file -->
<script src="js/needpopup.min.js"></script>
<!-- needPopup CSS file -->
<link href="css/needpopup.min.css" rel="stylesheet" />

###Step 2: Create HTML markup

Add needpopup class to the element you want to show, then bind caller functionality to any element with data-needpopup-show attribute. The value of attribute should be selector to call necessary popup (it can be id or other unique selector).

<a data-needpopup-show="#popup-id">Show popup</a>
<div id='popup-id' class="needpopup">Hello! I am popup.</div>

###Step 3: Call needPopup initialization

Just place needPopup.init() in your javascript code.

needPopup.init();

##Customization

First of all you need to apply data-needpopup-options attribute to custom popup.

<div id='custom-popup' class="needpopup" data-needpopup-options="custom">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

Then in your Javascript code add property accordingly to name used in attrubute.

needPopup.config.custom = {
  'removerPlace': 'outside',
  'closeOnOutside': false,
  onShow: function() {
    console.log('needPopup is shown');
  },
  onHide: function() {
    console.log('needPopup is hidden');
  }
};

That's all. You can create as many option sets as you wish.

###Options

removerPlace Where to place remover

default: 'inside'
options: 'inside', 'outside'

closeOnOutside Remove popup on click outside of it

default: true
options: true, false

###Callbacks

onShow Calls immediately after the popup is shown

default: function(){}
options: function(popup){ // your code here }
arguments:
  this: object that contained all necessary options to control current popup (for example popup.target - current popup element)
  popup: popup window element 

onBeforeShow Calls immediately before the popup is shown

default: function(){}
options: function(popup){ // your code here }
arguments:
  this: object that contained all necessary options to control current popup (for example popup.target - current popup element)
  popup: popup window element 

onHide Calls immediately after the popup is removed

default: function(){}
options: function(popup){ // your code here }
arguments:
  this: object that contained all necessary options to control current popup (for example popup.target - current popup element)
  popup: popup window element