jQuery Plugin For Scroll-triggered Popup Box - jPop
File Size: | 6.62 KB |
---|---|
Views Total: | 8077 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jPop is a jQuery popup plugin that detects the distance from top of the webpage and shows a modal popup as you scroll down the webpage. Great for signup form or social share popup to increase your subscribers.
See also:
How to use it:
1. Include the jQuery jPop's stylesheet plugin.css
in the header, and the script plugin.js
at the bottom of the webpage.
<head> ... <link rel="stylesheet" href="plugin.css"> </head> <body> ... <script src="//code.jquery.com/jquery.min.js"></script> <script src="plugin.js" ></script> </body>
2. Create the template for the popup box.
<div class="popup gee-popup"> <div class="popup-inner"> <a class="close-button popup-close-button"> × </a> <div class="popup-header"> <h3 class="popup-title"></h3> </div> <p class="paragraph" ></p> <div class="user-content"></div> <button></button> </div> </div>
3. Initialize the plugin and add your custom content to the popup box.
$("html").jPopup({ heading : "Popup Title", paragraph : "Popup content", userContent : 'Popup content', buttonText : 'Subscribe' });
4. All default plugin options.
$("html").jPopup({ // CSS class for popup parent container popupParent : "gee-popup", // top position in pixels to trigger the popup scrollTopPx : 100, // CSS class for close button popupCloseButton : ".popup-close-button", // Custom popup content heading : "heading - You can change", paragraph : "You can change paragraph from options. You can also change the input into your own template", userContent : '<div class="input"> <input class="form-control" type="text" placeholder="Your Email" > </div>', buttonText : 'Click me', buttonClass : "btn btn-info btn-block btn-lg", openPopup : function () { $("html").addClass('active-poup'); } });
This awesome jQuery plugin is developed by iksdatoo. For more Advanced Usages, please check the demo page or visit the official website.