WordPress & Divi – Create an Image Pop-up with no Plugins

Hey there, fellow tech enthusiasts! Are you using the Divi theme on your WordPress site and looking to create a simple yet effective image popup? Look no further, because we’ve got you covered! In this fun and easy walkthrough, we’ll show you how to create an eye-catching image popup that appears on pageload and closes when the user clicks on the background overlay. The best part? You don’t need any fancy plugins or additional tools – we’ll achieve this using a combination of built-in Divi features and a dash of custom HTML, CSS, and JavaScript magic. So, buckle up and get ready to add some pizzazz to your website with this nifty trick!

HTML structure:
The HTML code defines the structure for the popup overlay and its content, which includes the image to be displayed. The onclick attribute on the popup-overlay div is used to close the popup when the overlay is clicked.

   <div id="popup-overlay" class="popup-overlay" onclick="closePopup();">
     <div class="popup-content">
       <img src="/wp-content/uploads/your-image-path/popup.jpg" alt="Popup Image" />
     </div>
   </div>

CSS styling:
The CSS code is used to style the popup overlay and content. The popup-overlay class sets the overlay’s dimensions to cover the entire viewport, with a semi-transparent black background and a high z-index to ensure it appears above other page elements. The popup-content class positions the image in the center of the viewport.

   <style>
   .popup-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 9999;
   }

   .popup-content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: auto;
     max-width: 90%;
   }
   </style>

JavaScript functionality:
The JavaScript code is responsible for showing and hiding the popup. The DOMContentLoaded event listener triggers the openPopup() function after a 500ms timeout, ensuring the popup is displayed once the page has loaded. The openPopup() function sets the display property of the popup-overlay div to ‘block’, making it visible. The closePopup() function, called when the overlay is clicked, sets the display property to ‘none’, hiding the popup.

   <script>
   document.addEventListener('DOMContentLoaded', function() {
     setTimeout(function() {
       openPopup();
     }, 500);
   });

   function openPopup() {
     document.getElementById('popup-overlay').style.display = 'block';
   }

   function closePopup() {
     document.getElementById('popup-overlay').style.display = 'none';
   }
   </script>

And there you have it, folks! With just a few lines of code and our step-by-step walkthrough, you’ve successfully added a stunning image popup to your Divi-powered WordPress site. We hope you had as much fun as we did while creating this popup, and we’re confident your users will appreciate the added interactivity. Remember, you can always customize the code to fit your specific needs or even use this as a foundation for more advanced popups.

As always, we encourage you to experiment and explore new ways to enhance your website’s user experience. And don’t forget to share your creations and insights with fellow tech aficionados – after all, the more we share, the more we learn! Until next time, keep coding and keep smiling,