Get The Plugin
Account Login

How to Create a Popup in Divi Without a Plugin

by Mar 6, 2024Design Hacks89 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 allows you to create the popup without using any plugins at all! 🥳 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!

Note: This tutorial is the most lightweight popup possible! Since we’re utilizing Divi’s built in Lightbox library that is already bundled with Divi, no extra bloated scripts have to be added like other similar copycat tutorials ;)

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.

This row has the class

lightbox-content-gold

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

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.

Lightbox any Section
Lightbox Any Row
Lightbox Any Module

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Trigger the Lightbox with any link

Example:

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

I

Lightbox a Video

This is a random title

2 + 1 =

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

A Few Notes from Tim: 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 🥳

Additionally, make sure you have the “Defer jQuery And jQuery Migrate” feature DISABLED. jQuery is necessary for this tutorial, so keep that setting turned off.

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

class: lightbox-content-bluecta

This is the description of the blurb that is now showing inside of our lightbox popup! Creating Divi popups is easy with this tutorial! You can add any text  you want and style it any way you want using Divi!

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!

class: lightbox-trigger-bluecta

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.

class: lightbox-trigger-1
class: lightbox-trigger-gold

class: lightbox-content-1

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Click Here

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!

Get the Divi Hacks Plugin

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!

89 Comments

  1. Tecla Digital Lda.
    Tecla Digital Lda. on August 27, 2018 at 1:26 am

    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
      Charlie Wedel on August 27, 2018 at 2:30 pm

      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
      Muhammad Asif on August 25, 2021 at 9:37 am

      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
        Tim Strifler on August 27, 2021 at 1:39 pm

        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
    Malcolm Mellon on August 31, 2018 at 4:30 pm

    works perfectly thanks, very straightforward. And extensible :)

    Reply
  3. Rob
    Rob on March 14, 2019 at 11:47 am

    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
      Charlie Wedel on March 15, 2019 at 11:21 am

      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
      Charlie Wedel on April 23, 2019 at 10:13 am

      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
      Tim Strifler on June 21, 2021 at 10:55 am

      Thanks Stephanie! Glad you found it useful :)

      Reply
  6. Luis Cabrera
    Luis Cabrera on June 21, 2021 at 5:05 pm

    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
      Tim Strifler on June 22, 2021 at 7:55 am

      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
  7. IDezine
    IDezine on June 22, 2021 at 12:11 pm

    You are awesome. Thank you so much for this.

    Reply
    • Tim Strifler
      Tim Strifler on June 22, 2021 at 1:40 pm

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

      Reply
  8. Craig Kaiser
    Craig Kaiser on June 27, 2021 at 11:40 am

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

    Reply
    • Tim Strifler
      Tim Strifler on June 28, 2021 at 1:52 pm

      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
  9. Jane
    Jane on June 30, 2021 at 2:53 am

    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
      Jane on June 30, 2021 at 3:06 am

      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
        Tim Strifler on June 30, 2021 at 8:22 am

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

        Reply
  10. Stephanie
    Stephanie on June 30, 2021 at 3:44 am

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

    Reply
    • Tim Strifler
      Tim Strifler on June 30, 2021 at 8:21 am

      That’s great to hear, Stephanie! :)

      Reply
  11. Roland K
    Roland K on July 13, 2021 at 12:08 pm

    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
      Tim Strifler on July 13, 2021 at 1:13 pm

      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
  12. robbi.
    robbi. on July 15, 2021 at 11:15 pm

    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
      Tim Strifler on July 16, 2021 at 11:14 am

      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
  13. Jae Bedford
    Jae Bedford on July 29, 2021 at 3:59 am

    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
      Tim Strifler on August 11, 2021 at 9:29 am

      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
  14. Sam
    Sam on August 3, 2021 at 12:29 pm

    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
      Tim Strifler on August 11, 2021 at 9:29 am

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

      Reply
  15. Roland
    Roland on August 10, 2021 at 11:36 pm

    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
      Tim Strifler on August 11, 2021 at 9:33 am

      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
  16. Roland K
    Roland K on August 11, 2021 at 1:18 am

    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
      Tim Strifler on August 11, 2021 at 9:34 am

      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
  17. Daniel
    Daniel on August 21, 2021 at 8:55 am

    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
      Tim Strifler on August 23, 2021 at 1:45 pm

      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
  18. Nicole
    Nicole on August 23, 2021 at 10:05 am

    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
      Tim Strifler on August 23, 2021 at 1:51 pm

      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
        Nicole on August 24, 2021 at 8:00 am

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

        Reply
        • Tim Strifler
          Tim Strifler on August 24, 2021 at 1:21 pm

          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
            Andrew on August 27, 2021 at 9:25 am

            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
            Tim Strifler on August 27, 2021 at 1:42 pm

            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.

  19. M
    M on August 26, 2021 at 2:01 pm

    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
      Tim Strifler on August 27, 2021 at 1:40 pm

      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
  20. M
    M on August 29, 2021 at 9:49 am

    Thanks Tim : )

    Reply
  21. Charry
    Charry on September 2, 2021 at 1:48 pm

    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
      Tim Strifler on September 8, 2021 at 4:03 pm

      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
  22. Jay matenga
    Jay matenga on September 2, 2021 at 6:05 pm

    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
      Tim Strifler on September 8, 2021 at 4:04 pm

      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
  23. Tim
    Tim on September 7, 2021 at 6:41 pm

    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
      Tim Strifler on September 8, 2021 at 4:05 pm

      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
  24. Jelani
    Jelani on September 8, 2021 at 1:43 pm

    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
      Tim Strifler on September 8, 2021 at 4:09 pm

      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
        Jelani on September 9, 2021 at 4:10 pm

        It works perfectly now. THANKS!

        Reply
        • Tim Strifler
          Tim Strifler on September 9, 2021 at 4:37 pm

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

          Reply
  25. Tim Strifler
    Tim Strifler on September 8, 2021 at 4:07 pm

    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
  26. Benito Marlay
    Benito Marlay on September 9, 2021 at 5:45 am

    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
      Tim Strifler on September 9, 2021 at 11:25 am

      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
  27. Natalie
    Natalie on December 12, 2021 at 1:43 pm

    We have tried all the troubleshooting tips mentioned throughout the comments, but cannot get this to work. Any ideas?

    Reply
    • Tim Strifler
      Tim Strifler on January 10, 2022 at 4:28 pm

      What do your performance settings look like under Divi Theme Options?

      Reply
  28. Richard Bloom
    Richard Bloom on December 23, 2021 at 10:12 am

    Hi Tim,

    I love this technique thank you.

    However, similar to other comments, I can only get it to work if I turn off the Dynamic CSS / JS. I just tried the code today for the first time. Without the Dynamic CSS / JS disabled the pop up modual (an image) is visable on the page and when I click the Trigger (a button) it does pop up but no overlay and it appears at the top of my page.

    It’s on this page, all working but with the Dynamic CSS / JS disabled so the site works quite slowly;

    https://artroomcpd.co.uk/contact-booking-enquiry/

    Reply
    • Tim Strifler
      Tim Strifler on January 10, 2022 at 4:27 pm

      IT should work with the Dynamic CSS/JS enabled as long as you have the “Defer jQuery And jQuery Migrate” option disabled.

      Reply
  29. Hilary
    Hilary on December 27, 2021 at 3:11 pm

    Hi Tim,

    I’m having same issue. I put the new code in the BODY and it fixed the issue on the home page only.

    All the other pages on the website show the popup module at the bottom of the page – you can actually see the popup – and none of the links work. They used to, but no longer! Rats.

    Thank you for any help you can offer and thank you for the tutorial!

    Reply
    • Tim Strifler
      Tim Strifler on January 10, 2022 at 4:27 pm

      Hi Hilary,

      Make sure the “Defer jQuery And jQuery Migrate” performance feature is turned off under Divi Theme Options > General > Performance. That should helpfully fix it for you! :)

      Reply
  30. Heura
    Heura on January 3, 2022 at 2:48 am

    Hello,

    With the new Divi updates the popup has stopped working for me. I have incorporated the changes that you have updated but the content of the popup no longer appears correctly and a loading appears …

    Thank you so much!

    Reply
    • Tim Strifler
      Tim Strifler on January 10, 2022 at 4:26 pm

      Make sure the “Defer jQuery And jQuery Migrate” performance feature is turned off under Divi Theme Options > General > Performance.

      Reply
  31. Reggie
    Reggie on January 4, 2022 at 8:04 am

    Hello. I unable to make this tutorial work. The content section is visible by default on the front end, where as it’s supposed to be hidden by default. Once the trigger button is clicked, the content section sticks to the head part of the page and stops the page from scrolling until the page is refreshed to return to normal. I cleared all cache from the browser, cdn and divi static files. I was wondering if it is a bug or has divi made changes and this tutorial is out dated? Please help me

    Reply
    • Tim Strifler
      Tim Strifler on January 10, 2022 at 4:26 pm

      Hey Reggie, can you make sure the “Defer jQuery And jQuery Migrate” performance feature is turned off? That feature can definitely break this Popup Tutorial if it’s enabled.

      Reply
  32. rodrigo gonzalez bunster
    rodrigo gonzalez bunster on January 5, 2022 at 9:43 am

    Very well explained and a great simple solution!

    Reply
    • Tim Strifler
      Tim Strifler on January 10, 2022 at 4:25 pm

      Great! Glad to hear it’s working well for you! :)

      Reply
  33. Greg
    Greg on January 31, 2023 at 1:05 pm

    Hey Tim,
    Would it be possible to achieve this by clicking on a menu link, and/or custom menu link, in the main header navigation? So for example, if I added an SVG search icon in my menu, and once that icon was clicked, a search module would pop-up on the screen.

    Thanks!

    Reply
    • Tim Strifler
      Tim Strifler on March 7, 2024 at 1:19 pm

      This should work if you add the popup content in a theme builder template. However, we have not tested this

      Reply
  34. Alex
    Alex on February 1, 2023 at 7:40 am

    Any chance of animating the pop-up? if so? how?

    Reply
  35. wunderheit
    wunderheit on March 24, 2023 at 5:16 am

    Just in case you can’t get this to work try to replace the last line with this:

    In the example the “/” before “wp-content” is missing which can cause issues especially on sub pages.

    Thanks for the tutorial!

    Reply
  36. Bjarne
    Bjarne on March 28, 2023 at 4:01 am

    Hey Tim!

    There might be a typo in the fix needed due to Divi’s performance update. This relative url makes the popup css load only on the home page:

    By adding a / to the URL, I got it to work on child pages as well.

    Thoughts?

    Reply
    • Tim Strifler
      Tim Strifler on March 7, 2024 at 1:17 pm

      Thanks! I’ve updated the code to reflect this :)

      Reply
  37. Hartmut
    Hartmut on August 10, 2023 at 7:35 am

    Thank you for this great turoial. I have just one small problem. Unfortunately I can’t change the .lightbox-overlay background: color. I did it exactly according to your template, but unfortunately I have no success.
    can you help me
    Best regards

    Reply
    • Tim Strifler
      Tim Strifler on March 7, 2024 at 1:16 pm

      Try adding !important after the color to force the CSS

      Reply
  38. Vladimir
    Vladimir on August 18, 2023 at 12:54 pm

    Thanks for the tutorial.

    Everythings work properly but i will use like content of popup login module from Divi.

    When user set wrong password site is refreshed and popup is not show. Can you please help me?

    I need to have popup with login module show after user set wrong password.

    Thank you so much for any idea:)

    Reply
    • Tim Strifler
      Tim Strifler on March 7, 2024 at 1:15 pm

      Hi Vladimir,

      You should be able to use a WordPress Ajax login plugin. That will allow WordPress to check the login credentials without reloading the page.

      Reply
  39. Hilmar Løland
    Hilmar Løland on October 17, 2023 at 4:19 am

    A backslash is missing…
    In the line I believe there is missing a backslash before ‘wp-content’ – could not make this work, and then I saw that the magnific_popup.css did not load.

    It works when I add the backslash…

    Reply
    • Tim Strifler
      Tim Strifler on March 7, 2024 at 1:13 pm

      Thanks. We updated the code to fix this :)

      Reply
  40. Nicole Ingledew
    Nicole Ingledew on November 7, 2023 at 7:01 pm

    Hey mate,

    This worked like a charm! I’m just wondering how I can go about increasing the size and moving the position of the close icon.

    Sorry if you have already mentioned this.

    Cheers, Nicole

    Reply
    • Tim Strifler
      Tim Strifler on March 7, 2024 at 11:39 am

      Hi Nicole,

      You can add this to the bottom of the CSS:

      .mfp-close {
      font-size: 50px;
      }

      (adjust as needed)

      Reply
  41. ResQTek Nancy
    ResQTek Nancy on December 2, 2023 at 7:33 am

    Original:

    In Step One, I needed to add / at the beginning of this HREF otherwise there was a 404 error for the file.
    Changed to:

    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.