jQuery Plugins › jQuery Other Plugins › jQuery jPop

jQuery Plugin For Scroll-triggered Popup Box - jPop

File Size: 6.62 KB
Views Total: 7995
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP 30 jQuery Plugins 2023

Chrome, IE9+, FireFox, Opera, Safari#Modal#popup#subscription form
jQuery Plugin For Scroll-triggered Popup Box - jPop

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">
      &times;
    </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.