JS library of interacting popups
Now available only version for jQuery
Include the relevant files in the <head> of your document:
<link type="text/css" href="style/popuper.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/popuper.js"></script>Add class `popuper` to the activation link. Also add `data-target` attribute that includes `id` of the popup. ```html Open popup ```
Add class `popup` to the popup block and don't forget an `id`. ```html ``` Also you can insert link with the `popup-closer` class whitch will close this popup on click.
You can add `data-shift` attribute to the popup block to turn on or off the vertical shift (default is `true`). ```html ```
You can add data-scroll attribute to the popup block to enable automatic scrolling to the popup location (default is false).
<div id="myPopup" class="popup" data-scroll="true">
<a href="#" class="popup-closer"></a>
</div>You can add data-noclose attribute to the popup block to not hide previosly opened popup (default is false).
<div id="myPopup" class="popup" data-noclose="true">
<a href="#" class="popup-closer"></a>
</div>Now you just need to initialize the library. ```javascript $(function(){ popuper.init(); }); ```
Use this to initialize or reinitialize the library. It will automatically find all aactivation links.
popuper.init('myPopup', false, true, true);You can also pass the parametr with an id of the popup to immediatly open it.
Pass the second argument to set the vertical shift of the popup or not (default is true)
Pass the third argument to enable automatic scrolling to the popup or not (default is false)
Pass the fourth argument to close the previosly opened popup or not (default is false)
Opens popup with the passed id.
popuper.open('myPopup', true, false, false);Note that you first need to initialize the library!
This method will close all popups.
popuper.close();