jQuery Popup Modal with auto Open & Close – Popbox

The Popbox is a lightweight jQuery modal popup with auto open & close feature. It can be used to show images, videos, div elements in popup modal. You can set specific time interval after that popup modal will show & close.

The plugin also offer to open popup modal on different events (i.e window scroll).

Plugin Overview

Plugin: Popbox
Author: Aleksey Kuznetsov
Licence: MIT Licence
Published: June 9, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 8.61 KB

How to Use jQuery Popup Modal

1. Load the jQuery and popbox‘s CSS and JavaScript file into your HTML document to create popup modal.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Popbox CSS -->
<link rel="stylesheet" type="text/css" href="css/popbox.css">

<!-- Popbox Js -->
<script src="js/popbox.js" defer></script>

2. Create basic HTML structure for popup modal and add your items in it.

Tip: You can put anything in popup modal. i.e Images, videos and div elements.

<div class="popbox">
  <div class="dimmer"></div>

  <div class="modal">
    <div class="outgap">

      <div class="workarea">
        <div class="close_button">×</div>
        <div style="text-align: center;"><img src="https://source.unsplash.com/400x250/?gym" style="width: 400px; height: 250px;" /></div>

        <form>
          <input type="submit" style="position: absolute; left: -9999px" />

            <h1 style="text-align: center;">CodeHim.com</h1>

        </form>
        <div style="text-align: center;"><a role="button" href="#" onClick="PopBox.hide(); return false;">Close</a></div>

        <div class="close_msg" style="text-align: center;">Popup will be auto closed in <b class="close_countdown"></b> seconds.</div>

      </div>
    </div>
  </div>
</div>

3. Finally initialize the plugin with following script to active the jQuery popup modal. Use the auto_show & auto_close option to set the time interval.

doInit(function() {
  if (typeof $=="undefined") return 1;

  PopBox.init({
    auto_show: 5000,         // in milliseconds. 15000 milliseconds = 15 seconds. 0 = disabled.
    auto_close: 60000,        // in milliseconds. 60000 = 60 seconds. 0 = disabled.
    show_on_scroll_start: 48, // starting scroll position in percents, between 0% and 100%. Both 0 = disabled.
    show_on_scroll_end: 52,   // ending scroll position. Eg 40..60 means that popbox will appear when any part of page between 40% and 60% is appeared in the viewport.
    closeable_on_dimmer: true,
    auto_start_disabled: false,
  });
}, 1);