How to Create a Popup in Divi Without a Plugin

by Jun 15, 2021Design Hacks24 comments

Today, we’re going to show you how to take Divi’s lightbox functionality and use it to display a Divi popup of sections, rows, and modules.

This method of creating a popup with Divi requires ZERO plugins to accomplish. There is obviously nothing wrong with plugins (we love Divi plugins), but sometimes you want to add a quick popup without needing to install an extra plugin.

The Divi page builder already comes with a lightbox, and you can see examples of this in image and gallery modules.

With just a bit of jQuery code and CSS, we’ll be taking what Divi already has the power to do, and use it to create customized popups to display opt-in forms, call-to-actions, messages, images, videos, tabs, login modules, whole rows and sections, shortcodes, literally anything! Any Divi section, row, or module can be included in the popup!

The best part is how easy it is to implement. Keep in mind that this tutorial is for basic yet simple click-triggered popups. If you’re wanting a Divi popup solution with a lot of features (and without touching code), then take a look at Divi Overlays (our plugin from Divi Life). It’s the market leader when it comes to creating popups for Divi.

Let’s Look at Some Example Divi Popups

Click the elements below to see examples of what we’ll be creating in today’s tutorial.

Trigger the Lightbox with any link

Example:

<a href=”#” class=”lightbox-trigger-8″>Click Here</a>

Pretty cool huh?

Divi Popup Hack in a Nutshell

Since Divi already has the bulk of the popup functionality included already, there’s just a few small things we need to do to take advantage of the popup functionality for our own use.

Here’s an overview of what we’ll be doing in this tutorial create our custom Divi popups:

  1. Add the Custom Script to Enable Our Classes
  2. Add the Custom CSS
  3. Create your trigger element (button, CTA, image, blurb, etc) and add the class lightbox-trigger-element
  4. Create the Divi popup content (any section, row, or module) and add the class lightbox-content-element

Done! Pretty simple, right?

Keep on reading and we’ll walk you through it.

Step One: Add the Custom Script to Enable Our Popup Classes

Since Divi already has the lightbox functionality, we just need to enable the classes that we’ll be using so we can take advantage of the existing functionality.

The first thing we need to do is add the jQuery. This script will essentially tell the browser that we want to use Divi’s existing lightbox feature to open our custom popups using our custom classes.

Copy and paste the following script into the head of your website. You can add it to the head of your website via Divi’s Integration tab in Divi Theme Options.

<script type="text/javascript">
jQuery(document).ready(function(t){t('div:not(.et_mobile_menu) .lightbox-content, div:not(.et_mobile_menu) [class*="lightbox-content-"]').addClass("mfp-hide"),t("div:not(.et_mobile_menu) .lightbox-trigger").magnificPopup({items:{src:"div:not(.et_mobile_menu) .lightbox-content",type:"inline"}}),t('div:not(.et_mobile_menu) [class*="lightbox-trigger-"]').each(function(){var i=".lightbox-content-"+Array.prototype.find.call(this.classList,function(t){return t.indexOf("lightbox-trigger-")>-1}).split("lightbox-trigger-")[1];t(this).magnificPopup({items:{src:i,type:"inline"}})}),t(this).click(function(){t(".mfp-wrap").attr("id","et-boc")}),t('[class*="lightbox-content"]').prepend('<div class="lightbox-overlay"></div>')});</script>

Step Two: Copy and Paste the Following CSS

There’s not much to the CSS below. It essentially includes some minor positioning and the popup close button styling.

Copy and paste the CSS to the Custom CSS box within Divi Theme Options, or wherever you like to add custom CSS, such as a Divi Child Theme. You can learn how to create a Divi Child Theme in our child theme guide.

/****** Lightbox Styling *******/ 
[class*="lightbox-trigger-"] {cursor:pointer;}
[class*="lightbox-content-"] {position:relative; z-index: unset !important;}
[class*="lightbox-content-"] .mfp-close {color:#999999 !important;}
[class*="lightbox-content-"] .mfp-close:active {top:0px !important;}

Step Three: Create Your Trigger and Add the Custom CSS Class

Now that we’ve added the custom jQuery and CSS, we can create the popup trigger. To be clear, the trigger is what will make the popup open when clicked. The trigger can be a button, an image, text, or anything else you want to open the popup when clicked.

Once you’ve added the element to your page that you want to be the popup trigger, then you will add the following CSS class to the element:

lightbox-trigger-<value>

(replace <value> with any number or word)

In this example, I’ve added the class lightbox-trigger-bluecta to a button module as shown in the screenshot below:

Step Four: Create Your Popup Content & Add the Corresponding CSS Class

Now that we’ve created the popup trigger and added the custom CSS class to the trigger, we need to create the content on the page that will become our popup. It becomes the popup content when the corresponding CSS class is added to the custom CSS field of the Advanced tab of the section, row, or module.

So create the section, row, or module that you want to show inside the Divi popup or lightbox. It can be anywhere on the same page.

Note: once the class is added to the section, row, or module, it will be hidden by default when viewing the page on the front end, but will remain visible in visual builder.

After you’ve created the section, row, or module that you want to become the popup content, then you will add the following CSS class:

lightbox-content-<value> 

Again, replace <value> with the same number or word you used in step 3. In this example, I’ve added lightbox-content-bluecta to a CTA module.

Let’s try it out! Below is the button in step three, and when clicked, it will open the popup content we created in step four!

How to Add Multiple Lightbox Popups on the Same Page

Now, if you want to add multiple popups on the same page, just add a different word or number after lightbox-trigger- or lightbox-content-

Remember, the word or number you add to the end of the trigger and content classes must be the same for both classes in order for the popup to work correctly.

How to Customize the Popup Background Overlay

By default the background overlay for your popups will be solid black with no transparency.

If you’d like to customize this, you can add this custom CSS. Just change the background color value to your desired color. Use an rgba color value to set your desired opacity/transparency.

/****** Lightbox Background Overlay Styling *******/ 

.lightbox-overlay {
    background: rgb(0 0 0 / 60%) !important;

Get this Divi Popup Hack plus hundreds of other CSS and jQuery hacks that power up your Divi website!

Wrapping Up

That’s it, we’re done! Now you have awesome click-triggered popups that are built with Divi, WITHOUT having to use a plugin.

This hack is great for quick click triggered popups. If you’d like to do this without having to touch code, then take a look at the Divi Hacks plugin. It comes with hundreds of CSS & jQuery Hacks that will power up your Divi website :)

But if you need more features, such as the ability to set global popups on a timed delay and a bunch of other awesome triggers and features (& popup templates!), then we highly recommend the Divi Popup plugin (aka Divi Overlays). You can also take a look at our other popular Divi Plugins for additional tools that help you extend Divi even further.

Thanks for reading! If you have any questions leave a comment below!

24 Comments

  1. Tecla Digital Lda.

    I try to put a wordpress image gallery on the pop up section but it doesn’t work correctly. Is there a bug?

    Reply
    • Charlie Wedel

      Hi :) I see what you mean. You would have to disable lightbox on the gallery images as the lightbox is already being used to display the custom lightbox section.

      Reply
  2. Malcolm Mellon

    works perfectly thanks, very straightforward. And extensible :)

    Reply
  3. Rob

    Hey – I cannot get it to work at all. I’m pretty sure the js is the culprit as the lightbox-content- modules don’t even disappear on page load (I can read the js to see what it’s supposed to do.) I am putting it in the right place, in the header.

    What’s happening is: on click, I just get a page reload, exactly as would happen if I clicked any normal href=”#”.

    I don’t use a gallery on the page like the other commenter.

    Reply
    • Charlie Wedel

      Hey Rob :) Do you have a link that I could inspect? Also, sometimes people have issues when copy and pasting the jquery. Make sure all the ” quotes don’t get formatted as that will make the jQuery not work properly.

      Reply
    • Charlie Wedel

      Hey Joey, thanks for letting me know. This code was slightly outdated. I revised it and it should work now. Can you let me know how it works on your site? Thanks, Charlie

      Reply
    • Tim Strifler

      Thanks Stephanie! Glad you found it useful :)

      Reply
  4. Luis Cabrera

    First of all, thanks for the input.
    It works very well, except for the customization of the button in the form module. How can I solve that?

    Reply
    • Tim Strifler

      You can try flushing the cache in Divi Thene Options. If that doesn’t work then you can turn on in-line styles in Theme Options. That will for sure solve it. We had this same issue with Divi Overlays (although it’s been resolved without having to turn on inline styles). Something about Divi’s button module within popups. It doesn’t like to inherit the styling you have set. But I’m glad you liked the tutorial! 🙂

      Reply
  5. IDezine

    You are awesome. Thank you so much for this.

    Reply
    • Tim Strifler

      You’re welcome! I’m glad you found it helpful :)

      Reply
  6. Craig Kaiser

    Is There a way to have an on scroll trigger instead of a button for this? Thanks.

    Reply
    • Tim Strifler

      It’s possible but it would require some custom Javascript. We recommend taking a look at Divi Overlays which has the scroll trigger built in :)

      Reply
  7. Jane

    I was so excited when I found your video on YouTube on how to do this… except I couldn’t get it to work. The module which I wanted to be the popup is visible (not hidden) on the page. When I click the button, I get a dark grey background (like for the popup), but the words “content not found”. I’ve gone over the details in the tutorial several times and I have completed them as stated.

    PS: I tried to add CSS class to the button on fullwidth header using #lightbox-content- a.et_pb_button_one as per https://divilife.com/docs/how-to-use-the-css-selector-trigger-feature-to-set-click-triggers-in-divi-overlays-when-there-is-not-a-css-id-field/ but the whole fullwidth header is clickable, not just the button (yes, I changed to another word). I also tested the popup code on an ordinary module in case it was something in the fullwidth header, but I get the same result as above.

    Reply
    • Jane

      I figured it out! (why does this always happen after I post a comment?). You post lightbox-trigger- on the button and lightbox-content- on the thing you want to popup! I knew posting the same in both didn’t seem right, but that’s what I thought it said! Now I have found that out, I am mightily embarrassed.

      Reply
      • Tim Strifler

        Hi Jane, I’m glad you got it figured it out! And thanks for letting us know! :)

        Reply
  8. Stephanie

    Thanks so much! I have plenty of ideas how to use this popup and it works like a charm!

    Reply
    • Tim Strifler

      That’s great to hear, Stephanie! :)

      Reply
  9. Roland K

    Thank you for this great tutorial, Tim! Actually I am looking for an invert solution: I would like to add buttons to the lightbox content (for example an add to basket button) or add a link to an image opened in the lightbox. Do you have any suggestions regarding this workaround? Thank you in advance.

    Reply
    • Tim Strifler

      You’re welcome, Roland! Yes, you can easily do what you’re describing with this tutorial. Just design the popup how you want on the page, and then make either the entire row or section your popup. In the video I show how to make an entire section the Divi popup. If you follow that part, you can definitely achieve what you’re asking with adding buttons, etc. to the popup content. The part I’m referring to starts at about 15:44 in the video.

      Reply
  10. robbi.

    Hey Tim,

    I get the pop up to work, but opt-in email module doesn’t show the text in it from design shows, I then tried to get a normal form to show yet, the button style is missing.

    Reply
    • Tim Strifler

      You can try clearing Divi’s cache (Theme Options > Builder), and if that doesn’t work then try turning on inline-styles. That typically solves styling issues within the popup. The issue of styling not showing properly within the popup is very common with Divi and any popup solution. However, we solved this with Divi Overlays without having to turn on inline styles.

      Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.