Creating a Overlay Popup Box using CSS and JavaScript

In a previous post, I shared how-to create a top bar overlay popup using HTML, CSS and JavaScript. In this article, we are going to create a centered overlay popup box using CSS and JavaScript. Popups are a great way to capture a visitor's attention to share important information, request newsletter signups or share special offers.

Implementation

To implement the overlay popup box, we'll use a combination of CSS, and JavaScript. Let's dive into the details:

CSS Styling

Here is an example of how to customize the close link for the overlay popup box:

a.FlexPopup-close {
  color: #000;
  font-size: 90%;
  text-decoration: none;
}
a.FlexPopup-close:hover {
  text-decoration: underline;
}

JavaScript

The JavaScript code handles the trigger mechanism and applies the custom styles to the popup. You can select either a time delay or a scroll percentage as the trigger type. The script also allows you to set the time delay, scroll percentage, background color, text color, border style, and padding. Here's an example JavaScript snippet:

// Configuration variables
const useTimeDelay = true; // Set to true to use time delay, false to use scroll percentage
const overlayDelay = 5000; // Delay in milliseconds before showing the popup
const scrollPercentage = 70; // Percentage of the page scrolled before showing the popup

// Function to show the lightbox/modal popup
function showLightbox() {
  // Create the lightbox element
  const lightbox = document.createElement('div');
  lightbox.id = 'lightbox';

  // Add some styles to the lightbox (you can customize these styles)
  lightbox.style.position = 'fixed';
  lightbox.style.top = '0';
  lightbox.style.left = '0';
  lightbox.style.width = '100%';
  lightbox.style.height = '100%';
  lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  lightbox.style.zIndex = '9999';

  // Create the content of the lightbox (you can customize this content)
  const content = document.createElement('div');
  content.style.background = '#8db9ca';
  content.style.border = '1px solid #0085ad';
  content.style.padding = '4rem';
  content.style.position = 'absolute';
  content.style.top = '50%';
  content.style.left = '50%';
  content.style.transform = 'translate(-50%, -50%)';
  content.style.color = '#fff';
  content.style.textAlign = 'center';
  content.innerHTML = `
    <h2>Lightbox Content</h2>
    <p>This is the content of the lightbox/modal popup.</p>
    <a href="#" id="closeWindow" class="FlexPopup-close">Close</a>
  `;

  // Append the content to the lightbox
  lightbox.appendChild(content);

  // Append the lightbox to the document body
  document.body.appendChild(lightbox);

  // Close the lightbox when left-clicking outside of it
  lightbox.addEventListener('click', (event) => {
    if (event.target === lightbox) {
      closeLightbox();
    }
  });

  // Close the lightbox when clicking the close window link
  const closeWindowLink = document.getElementById('closeWindow');
  closeWindowLink.addEventListener('click', (event) => {
    event.preventDefault();
    closeLightbox();
  });
}

// Function to close the lightbox/modal popup
function closeLightbox() {
  const lightbox = document.getElementById('lightbox');
  if (lightbox) {
    lightbox.remove();
  }
}

// Function to check if the page has scrolled to the desired percentage
function checkScrollPercentage() {
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const windowHeight = window.innerHeight;

  const currentScrollPercentage = (scrollTop + windowHeight) / scrollHeight * 100;

  if (currentScrollPercentage >= scrollPercentage) {
    showLightbox();
    // Remove the scroll event listener after showing the lightbox
    window.removeEventListener('scroll', checkScrollPercentage);
  }
}

// Function to show the lightbox after the defined time delay
function showLightboxWithDelay() {
  showLightbox();
  // Remove the timeout after showing the lightbox
  clearTimeout(overlayTimeout);
}

// Check if time delay is used or scroll percentage is used
if (useTimeDelay) {
  // Wait for the defined delay before showing the lightbox
  const overlayTimeout = setTimeout(showLightboxWithDelay, overlayDelay);
} else {
  // Listen for scroll events
  window.addEventListener('scroll', checkScrollPercentage);
}

You may change the style of the box from lines 23 to 31, and change the content of the box on line 33.

CodePen

You can create your own Overlay Popup Box using CSS and JavaScript on CodePen, an online code editor and collaborative platform that allows developers to create, share, and test web projects.

Adding a overlay popup box to your website can effectively grab visitors' attention to share information, request newsletter signups or share offers. Feel free to tweak the code and experiment with different styles to create a visually appealing and engaging overlay popup box for your website!