How to Create a Timed Popup Modal in Divi Using jQuery

Create a Divi Popup Modal in jQuery with our detailed tutorial. Learn to integrate dynamic popups into your Divi theme website, enhancing user interaction with simple jQuery and CSS code examples. Perfect for Divi Builder users looking to add interactive web features.

Introduction

Creating a Divi Popup Modal in jQuery can significantly enhance your website’s interactivity. In this step-by-step tutorial, we’ll show you how to integrate dynamic popups into your Divi theme website, making it more engaging for your visitors. By following our easy-to-use jQuery and CSS code examples, you can implement interactive web features that improve user experience.

Setting Up jQuery for Interactive Popups

To add a dynamic popup modal to your Divi website, you’ll first need to prepare your jQuery and CSS code. Here’s a step-by-step guide to get you started.

1. Open your Divi Builder: Navigate to the page where you want the modal and open it in the Divi Builder.
2. Add a Code Module: Insert a Fullwidth Code module to your page to embed the jQuery.
3. Embed the jQuery: Place the following code inside two <script> tags in the module:

jQuery Code with LocalStorage Interval Check and Delay Settings

1. Start by adding a new Fullwidth Code module to your page.
2. Insert the jQuery code below within two <script> tags:

jQuery(document).ready(function($) {
  // User-configurable settings
  const delay = 10000; // Delay before opening the modal in milliseconds (e.g., 3000 = 3 seconds)
  const intervalHours = 12; // Interval in hours for opening the modal (e.g., 5 hours)
  const intervalMilliseconds = intervalHours * 60 * 60 * 1000; // Convert hours to milliseconds

  // Move all mobi-modal elements after the footer tag
  $('.mobi-modal').insertAfter('footer');

  // Add close button dynamically to each modal
  $('.mobi-modal').each(function() {
    let closeButton = $('×');
    $(this).prepend(closeButton);
  });

  // Function to open the modal after a delay if it hasn't been opened in the specified interval
  function openModalWithDelay(modalId, delay, intervalMilliseconds) {
    // Get the current timestamp
    const now = new Date().getTime();

    // Check if the modal has been opened within the specified interval
    const lastOpenedTimestamp = localStorage.getItem('mobiModalLastOpened');

    // If the modal hasn't been opened within the specified interval, set a timeout to open it
    if (!lastOpenedTimestamp || (now - lastOpenedTimestamp) > intervalMilliseconds) {
      setTimeout(function() {
        $('#' + modalId).css('display', 'flex'); // Change display to flex to center content
        // Store the current timestamp in localStorage
        localStorage.setItem('mobiModalLastOpened', now);
      }, delay);
    }
  }

  // Function to reset the localStorage entry
  function resetModalTiming() {
    localStorage.removeItem('mobiModalLastOpened');
  }

  // Example: Open the first modal after the specified delay
  openModalWithDelay('mobi-modal1', delay, intervalMilliseconds);

  // Example: Call resetModalTiming to reset the localStorage entry
  // resetModalTiming(); // Uncomment to reset the modal timing

  // When the user clicks on  (x), close the modal
  $(document).on('click', '.mobi-close', function() {
    $(this).closest('.mobi-modal').css('display', 'none');
  });

  // When the user clicks anywhere outside of the modal, close it
  $(window).on('click', function(event) {
    $('.mobi-modal').each(function() {
      if ($(event.target).is(this)) {
        $(this).css('display', 'none');
      }
    });
  });
});

CSS Styling for the Modal:

Add another Fullwidth Code module for CSS and include the following between two <style> tags:

/* Modal container */
.mobi-modal {
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  display: none; /* Hidden by default */
}
.mobi-modal > div {
  overflow-y: auto;
}
/* Close button */
.mobi-close {
  color: #000;
  float: right;
  font-size: 46px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  background: #fff;
  outline: 2px solid #000;
  border-radius: 50px;
  padding: 5px;
}
.mobi-close:hover,
.mobi-close:focus {
  color: #aaa;
  outline: 2px solid #aaa;
  text-decoration: none;
  cursor: pointer;
}

Regular Section Module

Setting Up Modal Triggers and Containers
Configure IDs and Classes:

Add the following ID and Class to the modal container. In this case the Section Advanced tab as shown in the image above.

/* Modal container */
mobi-modal1

mobi-modal

How to reset Local storage for testing purposes

1. Create an html button by adding a code module to the fullwidth section.

Reset Modal Timing

1. Add another Code module and insert the follwoing jQuery code below within two <script> tags:

jQuery(document).ready(function($) {
  // Function to reset the localStorage entry
  function resetModalTiming() {
    localStorage.removeItem('mobiModalLastOpened');
    console.log("Modal timing has been reset.");
  }

  // Call the reset function on page load for testing (optional)
  // resetModalTiming();

  // Bind the click event to the reset button
  $('#reset-timing-button').on('click', function() {
    resetModalTiming();
    alert("Local storage reset");
    location.reload(); // Refresh the page after the alert
  });
});

For Multiple Modals:

For additional modals, the numerical value for the IDs must coincide with each other.
In other words, if another modal was to be added, the ID for the Section container would be

mobi-modal2

and the Class for the trigger module would be

mobi-modal

openModalWithDelay('mobi-modal2', delay, intervalMilliseconds);

openModalWithDelay('mobi-modal2', delay, intervalMilliseconds);

Best Practices for Using Popups

User Experience: Ensure popups are not intrusive. They should enhance the user experience, not hinder it.
Timing: Consider the timing of your popups. For example, display a popup after a user has spent a certain amount of time on your site.
Relevance: Make sure the content of your popups is relevant to your users. For instance, use popups to offer additional information, special promotions, or subscription invitations.

Conclusion

By following this detailed tutorial, you can create a Divi Popup Modal in jQuery that will add dynamic interactivity to your Divi theme website. Implementing these popups can significantly enhance user engagement and improve the overall user experience.