Creating a Top Bar Overlay Popup using CSS and JavaScript

Popups are a great way to capture a visitor's attention and promote important information or offers on a website. In this blog post, we'll explore how to create a top bar overlay popup that can be triggered either after a certain time delay or when the user scrolls to a specific percentage of the page. The script allows customization of various aspects, such as background color, text color, bottom border style, and padding, providing flexibility to match the design and preferences of your website. Here is what we will create:

Implementation

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

HTML Structure

The HTML structure consists of a container element with an ID of "lightbox" that holds the popup content. The content includes a close button, a heading, a paragraph, and a call-to-action button. Here's an example HTML structure:

  <div id="lightbox">
    <span class="close">&times;</span>
    <p>This is where you may put an exciting annoucement! <a class="signup-btn" href="#">Read More</a></p>
  </div>

CSS Styling

The CSS styles define the appearance of the popup. You can customize the background color, text color, bottom border style, and padding to suit your website's design. Here's an example CSS snippet:

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  display: none;
  text-align: center;
  z-index: 9999;
}

#lightbox p {
  /* Add custom styling here */
}

#lightbox a.signup-btn {
  background-color: #0085ad;
  border: 1px solid #005670;
  padding: 0.5rem 0.75rem;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

#lightbox a.signup-btn:hover {
  background-color: #005670;
  border: 1px solid #005670;
  padding: 0.5rem 0.75rem;
  color: #fff;
  text-decoration: none;
}

#lightbox .close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

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, bottom border style, and padding. Here's an example JavaScript snippet:

window.addEventListener('DOMContentLoaded', function() {
  // Set options for the lightbox appearance
  var triggerType = 'time'; // 'time' or 'scroll'
  var timeDelay = 5000; // 5 seconds
  var scrollPercentage = 50;

  // Set styles for the lightbox
  var backgroundColor = '#8db9ca';
  var textColor = '#000000';
  var borderBottom = '1px solid #0085ad';
  var padding = '0.25rem';

  // Check the trigger type and show the lightbox accordingly
  if (triggerType === 'time') {
    setTimeout(showLightbox, timeDelay);
  } else if (triggerType === 'scroll') {
    window.addEventListener('scroll', handleScroll);
  }

  // Function to display the lightbox
  function showLightbox() {
    var lightbox = document.getElementById('lightbox');
    lightbox.style.display = 'block';
    lightbox.style.backgroundColor = backgroundColor;
    lightbox.style.color = textColor;
    lightbox.style.borderBottom = borderBottom;
    lightbox.style.padding = padding;

    var closeButton = document.querySelector('.close');
    closeButton.addEventListener('click', function() {
      lightbox.style.display = 'none';
    });

    var signupButton = document.getElementById('signup-btn');
    signupButton.addEventListener('click', function() {
      // Handle sign-up button click event
    });
  }

  // Function to handle scroll event
  function handleScroll() {
    var scrollPosition = window.innerHeight + window.pageYOffset;
    var documentHeight = document.body.scrollHeight;
    var reachedScrollPercentage = (scrollPosition / documentHeight) * 100 >= scrollPercentage;

    if (reachedScrollPercentage) {
      showLightbox();
      window.removeEventListener('scroll', handleScroll);
    }
  }
});

Adding a top bar overlay popup to your website can effectively grab visitors' attention and convey important messages or offers. By utilizing the provided HTML, CSS, and JavaScript code, you can create a customizable top bar overlay popup that triggers either after a specified time delay or when the user scrolls to a defined percentage of the page. Additionally, you have the freedom to customize the background color, text color, bottom border style, and padding to match your website's design and preferences.

Feel free to tweak the code and experiment with different styles to create a visually appealing and engaging top bar overlay popup for your website!