jQuery Plugin To Show A Popup When Scrolling Down - slidebox
File Size: | 7.57 KB |
---|---|
Views Total: | 4801 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

slidebox is a lightweight jQuery plugin that shows a sliding popup box when your user scrolls down and reaches a specific point (e.g. bottom) of the webpage. Check out this jQuery plugin If you'd like to have a popup that shows instantly when the page opens.
How to use it:
1. Place jQuery library and the jQuery slidebox plugin's script at the end of the document so the page loads faster.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.slideBox.js"></script>
2. Insert your own content (e.g. subscription box, contact form, featured posts) to the popup box.
<div id="slidebox"> Your content here </div>
3. Style the popup box whatever you like.
#slidebox { ... }
4. Initialize the plugin and specify at which point you want to show the popup box.
$('#slidebox').slideBox({ // top position in pixels or elements target: 1250, });
5. Specify the position where to place the popup box.
$('#slidebox').slideBox({ // [bottom|middle|top] and [left|center|right] position: 'bottom right', });
6. Specify the sliding direction.
$('#slidebox').slideBox({ // or 'left' appearsFrom: 'right', });
7. Specify the animation speed in milliseconds.
$('#slidebox').slideBox({ slideDuration: 1500 });
8. Specify the the closing element.
$('#slidebox').slideBox({ closeLink: '#close' });
9. Events.
$('#slidebox').slideBox() .on('sb.hidden', function() { // when hidden }).on('sb.shown', function() { // when shown });
This awesome jQuery plugin is developed by stevedavid. For more Advanced Usages, please check the demo page or visit the official website.