Layout examples


Free downloads


Pricing plans


Tutorials & Tools

Contact Us

Questions, concerns or comments?

My Account

View member dashboard


View your cart











Monthly, Yearly or Lifetime

View Pricing Table

Plugin Tutorial

Guide on How to Use Plugin

jQuery Script Generator

jQuery structure and syntax generator

Adaptive CSS Gallery Layout for Divi

Picture Gallery Using CSS Grid

Interactive Image Flip Cards

Create Image Flip Cards

Floating Modules

How to Create a Floating Module?

Zoom in Effect

How to Add Zoom Effect To Images?


Questions, concerns and comments

Send us a message



Back to top

5 Steps to Create an Easy Timed Divi Popup Modal in jQuery – Divi Mobi First Tutorial

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.


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

  // Add close button dynamically to each modal
  $('.mobi-modal').each(function() {
    let 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() {

  // 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: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 */


How to reset Local storage for testing purposes

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

  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() {
    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() {
    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


and the Class for the trigger module would be

openModalWithDelay('mobi-modal2', delay, intervalMilliseconds);
Next add another code module and call the following function, replacing ‘mobi-modal1 with ‘mobi-modal2”

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.


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.


Join Our Divi Mobi First Community

Get access to all our Divi Mobi First tips, layout and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

By Kerwin

Web Designer | Developer | Educator

Completely revolutionize the way you think about building Divi Websites.
Get Instant Access Now

Check Out These Related Posts

CSS Gallery Grid

CSS Gallery Grid

Introducing the Ultimate Responsive, Adaptive Gallery Layout for Divi: Powered by CSS Grid Elevate your online presence with our new DiviMobiFirst layout featuring a responsive, adaptive gallery powered by the robust CSS Grid. This layout is designed to showcase your...

read more
Interactive Flip Cards for Divi WordPress – Elevate Your Web Design

Interactive Flip Cards for Divi WordPress – Elevate Your Web Design

Dive into the world of dynamic web design with our customizable interactive flip cards, designed exclusively for Divi WordPress builder users. Crafted with precision using CSS and jQuery, these cards offer a visually stunning front image module and a highly customizable back profile module. Ready to enhance your site’s user engagement? Download the JSON file easily by just providing your email and start creating an unforgettable online experience. Your website deserves to be as interactive and appealing as it is informative. Join the flip card revolution today and watch your site come alive!

read more



Submit a Comment

Your email address will not be published. Required fields are marked *