User-friendly Popup Window Without Harming SEO - jQuery Popupbox

Popupbox is a lightweight, user- and SEO-friendly jQuery popup plugin that has the ability to show/hide the modal popup after a timeout or the page is scrolled to a specific point within the document.

How to use it:

1. Import both jQuery and the Popupbox plugin into your web project.

<link rel="stylesheet" href="./popbox.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="./popbox.js"></script>

2. Create the popup content following the markup structure as these:

<div class="popbox">
  <div class="dimmer"></div>
  <div class="modal">
    <div class="outgap">
      <div class="workarea">
        <div class="close_button">&times;</div>
        ... Popup Content Here ...
        <a role="button" href="#" onClick="PopBox.hide(); return false;">Close Button</a>
        <div class="close_msg">Popup will be auto closed in <b class="close_countdown"></b> seconds.</div>
      </div>
    </div>
  </div>
</div>

3. Initialize the popup and specify the timeout (in milliseconds) & scroll position (in percent) in the JavaScript:

PopBox.init({
  auto_show: 15000,
  auto_close: 60000,
  show_on_scroll_start: 48,
  show_on_scroll_end: 52
});

4. Enable/disable the auto show functionality. Default: false (enabled). It can be re-enabled by calling PopBox.enable_auto() method. You can also set the option to 'scroll' that automatically triggers the popup only after any scroll event.

PopBox.init({
  auto_start_disabled: true
});

5. Allows the user to close the popup window by clicking on the background overlay. Default: true.

PopBox.init({
  closeable_on_dimmer: false
});

6. Determinate whether the popup window has been already displayed. Default: false.

PopBox.init({
  auto_shown: true.
});

7. Default CSS classes which can be used to style the popup window using your own CSS.

PopBox.init({
  classes: {
    popbox: "popbox",
    workarea: "workarea",
    fixed: "popbox-fixed",
    no_overflow: "popbox-no-overflow",

    close_button: "close_button",
    close_countdown_text: "close_msg",
    close_countdown_digits: "close_countdown",
  }
});

8. Show the popup window manually.

PopBox.show();

9. Callback functions which will be fired after shown/hidden.

PopBox.init({
  on_show: false, 
  on_hide: false
});

Changelog:

2019-10-23

• JS update

2019-08-28

• JS update

2019-08-27

• Added callbacks

2019-07-01

• Added more options.

---

This awesome jQuery plugin is developed by utilmind. For more Advanced Usages, please check the demo page or visit the official website.