How to Create a Popup in Divi Without a Plugin

by Jun 15, 2021Design Hacks59 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 body of your website. You can add it to the body of your website via Divi’s Integration tab in Divi Theme Options.

If this is your first time viewing this tutorial, you can essentially ignore the updates below. However if you used this tutorial prior to Divi 4.10, then the updates below address what changed in the tutorial to make the popups compatible with Divi 4.10+ (see Divi changelog here). 

Update 8/24/21: The new Divi Performance Update (4.10+) now loads all CSS and JS dynamically based on what you use on the page. This means that the Magnific Popup script and styling isn’t loaded automatically unless you’re using the Gallery module. Initially this update broke the popup method in this tutorial, however we have updated it to include the fix.  The last two  lines of the code below will load the Magnific Popup script and styling properly. So you can continue using this “popup without a plugin” method while also using Divi’s latest performance features 🥳

Update 9/8/21: For best results make sure to add the below code to the BODY section of your website via the Integration tab in Divi Theme Options. This tutorial previously told you to add the code to the head section, however due to the new Performance features, it was giving inconsistent results. Adding the code to the BODY section fixes this allowing the popup to work flawlessly every time. :)

<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>

<script src="/wp-content/themes/Divi/includes/builder/feature/dynamic-assets/assets/js/magnific-popup.js" async></script>
<link rel="stylesheet" href="wp-content/themes/Divi/includes/builder/styles/magnific_popup.css">

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!

59 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
    • Muhammad Asif

      After using the latest version and updating the latest code in head section, I am still seeing the issue.. the popups section defined are just showing on the website and they are not working.. zero, how to fix?

      Reply
      • Tim Strifler

        Hi Muhammad,

        Make sure to clear ALL caches including the Divi Static CSS File cache as well as your browser cache. That should solve it :)

        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
  11. Jae Bedford

    How can I disable the content rows in the visual builder?

    It’s just more of an annoyance seeing it than anything.

    I know there is a way to do it with java but I’m not very good at it just yet.

    Reply
    • Tim Strifler

      I’m not really sure of a way to do that. I’m sure it’s possible but probably a lot more trouble than it’s worth.

      Reply
  12. Sam

    I want to say a huge thank you for this, I’ve been putting off doing this because I couldn’t find the code I needed. Thank you so much, very easy to follow!

    Reply
    • Tim Strifler

      That’s great to hear! You’re very welcome! :)

      Reply
  13. Roland

    Hello Tim,
    the soloution is so easy to implement, thank you for sharing it. Nevertheless, it doesn’t work for me, I do something wrong, I want to trigger the my-account form in woocommerce in the lightbox, I get the lightbox on by button/icon click in the menu, the lightbox opens, but it appears ‘no content’. The trigger and content css are set correct, the layout is saved in the Divi library and the button/icon links to the ‘my-account’ page and when I enter the direct ‘my-account’ address in the browser, it shows nothing (which shows, that I set everything right, as it disappears in the front-end)… I would very much appreciate if you would find the time to take a look on this issue.
    Thank you in advance.
    Best regards,
    Roland
    P.S.: The webpage is not public ready, therefore, the home page is under construction, but the site is online, just use home_ instead of home.
    P.P.S.: I use bodycommerce from diviengine to customize the forms

    Reply
    • Tim Strifler

      Hi Roland,

      For this solution, the content must be found on the actual page (not the library). So it should still work to do what you’re wanting, but you will just need to add the content of each page. I’d recommend adding it to your footer via the theme builder so that it will automatically show up on all pages (but not be shown until the lightbox is triggered).

      Reply
  14. Roland K

    Hello Tim,
    it works, great tutorial. Is it also possible to trigger the lightbox from a different page or does it only function on the same page? I would like to trigger the lightbox instead of the my-account form in woocommerce and added a button/icon on the menu, but the lightbox opens only if I’m already on the my-account page. Thank you for your friendly support.

    Reply
    • Tim Strifler

      You just need to add the content to each page. The easiest way to do this would be to add it to a theme builder template such as the footer. Or you can use the Divi Overlays plugin which will make it a lot easier.

      Reply
  15. Daniel

    Hi, Tim!

    That’s a fantastic hack… but I how do I make a transition for the popup to show?

    When I click the content just pop’s-out very bluntly.

    Reply
    • Tim Strifler

      Hi Daniel,

      The Magnific Popup script that this tutorial is based on does not have animation transitions by default, however you can manually add animations with custom CSS. The Magnific Popup documentation will give you some examples to try: https://dimsemenov.com/plugins/magnific-popup/documentation.html#animation

      Alternatively, our Divi Overlays popup plugin has a bunch of animations built in that you can easily customize (speed, direction, etc) without touching code.

      Reply
  16. Nicole

    Hi, Tim! First of all, thank you for the great tutorial!
    It worked perfectly for a few days, but then the pop up went visible on the page and on clicking the trigger, I just get a page reload, exactly as would happen if I clicked any normal href=”#”.
    Do you have any idea why would this happen? Thanks!

    Reply
    • Tim Strifler

      Hi Nicole,

      Did you by chance update to Divi 4.10+ recently? If so then that is definitely the reason it’s no longer working. This tutorial is based on the magnific popup script that is already built into Divi. The problem now is that Divi’s performance update (4.10) now only loads the CSS and JS for the modules you have active. So this means it doesn’t load the magnific popup script automatically like it used to. It now only loads it if you have a gallery module or image module with lightbox enabled on the page.

      So in the meantime, you can turn off the “Dynamic CSS” and “Dynamic Javascript Libraries” settings within Divi’s performance settings (Divi Theme Options > General > Performance). This should immediately fix the issue. We will soon update this tutorial to work even when those settings are enabled.

      Reply
      • Nicole

        It was exactly it, Tim! Thank you so much!
        I’ll be waiting for the update :)

        Reply
        • Tim Strifler

          We just updated the post for this fix! All you need to do is go to step one in the tutorial and re-copy the code and paste it again into the Integration tab. That code will now load the Magnific Popup script and styling that is needed for the popup to work correctly. Let me know if it works for you! :)

          Reply
          • Andrew

            Hey Tim, I had the same issue after a Divi upgrade so I made the changes as per your 8/24 post update but it still does as Nicole described. The fix was to disable the Dynamic CSS and Dynamic Javascript Libraries as per your recommendation. All working as expected now.

          • Tim Strifler

            Hi Andrew,

            You should be able to have the Dynamic CSS/JS features turned on as long as ALL caches have been cleared. We’ve tested this thoroughly and it definitely works with those new performance features turned on. But if you haven’t throughly cleared your caches (especially Divi static CSS file generation cache AND browser cache) then you may not seeing it working properly. Let us know if it’s still not working even after clearing all caches. Also try testing in an Incognito Browser window too.

  17. M

    Hello

    I have had exactly the same problem as Nicole in that my popup worked fine until I updated the divi theme to 4.10+. As suggested I have copied the new code from step one but the it’s still not working. However, when I turn off the dynamic css and dynamic Javascript libraries the popup works fine. Am I right in assuming that once I’ve copied the new code I can turn the dynamic css & dynamic JS back on? By turning them back on the problem still persists.

    Reply
    • Tim Strifler

      Yes you can turn on the Dynamic CSS/JS features as long as you have the updated code that we tweaked recently. Just be sure to clear ALL caches including the Divi Static CSS File cache as well as your browser cache. That should solve it :)

      Reply
  18. M

    Thanks Tim : )

    Reply
  19. Charry

    Hi Tim, Thank you for your article, it helped a lot.

    Can you check though – it seems that the link for the magnific_popup.css is missing a forward slash.

    Thank you.

    Reply
    • Tim Strifler

      Hi Charry,

      That part is correct. However, I just updated the tutorial with another fix. Adding the code to the Head section like this tutorial originally taught no longer works as well as it should depending on browser and the performance features that were enabled. However, if you add the code to the BODY section of the integration tab in Theme Options, then it will solve that and the popups will work as they should :)

      Reply
  20. Jay matenga

    Hi Tim, great workaround. Thanks so much.

    In spite of the updated code, I’m finding I need to keep DIVI 4.10.6’s Dynamic CSS and Dynamic JavaScript Libraries both disabled in order for the script to work properly. I’m using it on this page: https://congregational.org.nz/churches/.

    Keeping those DIVI performance options switched off isn’t a big deal for the site I’m using the script with because it’s not that big a site, but I can imagine it affecting performance for larger sites.

    Any additional advice would be appreciated.

    Cheers,

    Jay

    Reply
    • Tim Strifler

      Hi Jay,

      We just updated the tutorial once more. Instead of adding the code to the head section, add it to the body section. This will allow you to keep all the Performance features enabled. Just be sure to clear all caches after making these changes :)

      Reply
  21. Tim

    I couldn’t get this to work until I added the gallery module (but turned off visibility). I own your Divi Overlays plugin but for this project I need to have all the content on the page to satisfy a requirement that users be able to print all the page including overlays, so I thought I’d give this method a try.

    Reply
    • Tim Strifler

      Hi Tim,

      Glad to hear you’re a fan of Divi Overlays :)

      We actually just updated this tutorial once more. If you add the code to the body section (instead of the head like previously taught in this tutorial), then the popups should work great without having to add the gallery module.

      Reply
  22. Jelani

    I have an issue where for some reason the overlay only works while editing in the visual builder.

    I have cleared my browser cache from the last 24hrs and the CSS file within Divi, which only occasionally resolves the issue. For example, just a few minutes ago I had it working after clearing the cache, but now, after refreshing the page I’m back to the common error others are having with the page reloading as “domain.com/#”. This issue is persistent in both the visual builder and incognito tabs.

    I’m assuming I need to delete more cache? Or is it possible that Divi (or some other plugin) is replacing the cache I just cleared?

    Similar to “Andrew on August 27, 2021 at 9:25 am”, disabling the Dynamic CSS / JS makes it work. So I will leave it with those options disabled right now. I look forward to a reply so I can find a true solution.

    Reply
    • Tim Strifler

      Hi Jelani,

      We just updated the tutorial again for better computability with Divi 4.10+. Make sure you’re using the latest version of the code, and add it to the BODY section of the Integration tab in Theme Options (not the head). This should fix all issues while allowing you to keep all of Divi’s Performance features enabled :)

      Reply
      • Jelani

        It works perfectly now. THANKS!

        Reply
        • Tim Strifler

          You’re welcome! Glad to hear it! :)

          Reply
  23. Benito Marlay

    Hey Tim,

    Thank you for still responding to your comments for an older tutorial!

    I’m actually having the same issue as Jelani. I’m not having the issue with the “domain.com/#”.

    My issue is that it works great on the homepage however when I try to use the same thing for a different page none of them works. I’ve got it set so the content modules are on the same page and with different class trigger names. But I do see them triggering whilst editing.

    Thank you again.

    Reply
    • Tim Strifler

      Hi Benito,

      We just updated the tutorial yesterday with an additional fix. When did you set up the popup from this tutorial? You’ll want to make sure you are adding the code to the BODY and not the Head like this tutorial originally taught.

      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.