jQuery Popup Modal with auto Open & Close – Popbox

The Popbox is a lightweight jQuery modal popup with auto-open & close features. It can show images, videos, and div elements in a popup modal. You can set specific time intervals after that popup modal will show & close. The plugin also offers to open popup modal on different events (i.e window scroll).

How to Create a jQuery Popup Modal

1. Load the jQuery and popbox‘s CSS and JavaScript files into your HTML document to create a 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 a basic HTML structure for the popup modal and add your items.

Tip: You can put anything in the 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 the following script to activate 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);

That’s all! hopefully, you have successfully created a popup modal with auto open and close using jQuery. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.