How To: Add Popups to Your Website (Without a Plugin)

by Utsab Karki, Senior WordPress Developer

Insights / Website Development / How To: Add Popups to Your Website (Without a Plugin)

A popup is a window that appears on a website when visiting a webpage or when something is clicked. When used appropriately, popups can be a great tool for conveying important information to users.

Popups can be used for various purposes such as to display notifications, collect user information, promote content and products, and more.

But with great digital tools, come great responsibility. If your site has a popup as soon as a user loads the site, or if it persistently pops up even after it’s closed, you will drive your users crazy.

If you choose to implement a popup on your site, use it sparingly and thoughtfully.

In order to add a popup to a website, we will use HTML to display the popup content, CSS to style the popup, and JavaScript to display or hide the popup.

Defining Content with HTML

HTML, or Hyper Text Markup Language, is the standard markup language that provides the building block for the World Wide Web. In order to display the popup on a webpage, the first thing we need to do is add some HTML to the page so that it is part of the page.

  <div class="popup-container" style="display:none;">
    <div class="close-popup">X</div>
    <div class="popup-content">
      <div class="popup-content-inner">
        { Popup Content Goes Here }
      </div>
    </div>
  </div>

In the above HTML, we create a div and assign it the popup-container class. The popup is styled to be hidden by default. This div will be used as a container to hold the contents of the popup as well as the close button to dismiss the popup when clicked.

The above HTML can be added right before the closing </body> tag.

Adding Styles with CSS

CSS, or Cascading Style Sheets, is a language that describes the presentation of a webpage. We will use CSS to add styles to the popup.

  .popup-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    padding: 15px;
    z-index: 9999;
  }

  .close-popup {
    font-size: 25px;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
  }

  .popup-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

In the above CSS, we’ve given the popup-container position: fixed;, and have it cover the entire screen. We absolutely position the close-popup div on the top right of the screen and add styles to the popup-content div to center everything on screen.

Setting Conditions with JavaScript

JavaScript is a programming language that is used to program the behavior of a webpage. In this case, we use jQuery, which is a JavaScript library to program how the popup works.

The jQuery code for the popup can vary depending on if we want to display the popup when something is clicked or when the page loads.

Displaying the Popup on Click

In order to display the popup when something is clicked, we will need to add some HTML to the page which when clicked would display the popup.

  <p><span class="open-popup">Click to open popup</span></p>

After adding the above HTML to the page, the following jQuery code can be added to display/hide the popup.

  $('.open-popup').click(function(){
    $('.popup-container').show();
  });

  $('.close-popup').click(function(){
    $('.popup-container').hide();
  });

The above code displays the popup when the element with the class open-popup is clicked and hides the popup when close-popup is clicked.

Displaying the Popup When a Page Loads

As we mentioned previously, popups should be used sparingly and in a way that doesn’t negatively impact the user experience.  If you choose to have a popup triggered by a page loading, make sure it doesn’t pop up right away.

If we want to display the popup when a page loads, then we adjust the above code by putting it inside a window.load function and getting rid of the click function to open the popup.

  $(window).load(function(){
    $('.popup-container').show();

    $('.close-popup').click(function(){
      $('.popup-container').hide();
    });
  });

Popups are a great way to display notifications, remind site visitors of certain products/promotions, or to display additional information dynamically.

If you need help implementing or determining the best way to add a popup, reach out to us. We are here to help fulfill all your digital marketing needs.