User-friendly Popup Window Without Harming SEO - jQuery Popupbox

File Size: 11.3 KB
Views Total: 1599
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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>

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

  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.

  auto_start_disabled: true

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

  closeable_on_dimmer: false

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

  auto_shown: true.

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

  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.;

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

  on_show: false, 
  on_hide: false




  • JS update


  • Added callbacks


  • 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.