Popup content is not displayed | Popups for Divi

This article is only relevant for the free plugin Popups for Divi.

The problem

When using the free plugin, you might notice some content does not display correctly.

You might experience issues like:

• Dynamic Forms are not working inside a Popup
• A Code Module is not displayed inside a Popup
• Embedded content inside a Popup does not load
• A shortcode does not work inside a Popup
• My HubSpot form is not displayed in the Popup

Those problems typically happen in the following scenario:

• You use a Code Module or a shortcode inside a Popup.
• The custom code or shortcode loads a custom JS file or adds inline JS to the page.
• When using the same Code Module or shortcode outside a Popup, it works correctly.

Why this happens

Custom JavaScript usually runs on page load and initializes relevant elements in the DOM, such as a dynamic form. However, Popups are stored in memory, and are not part of the DOM until they are displayed.

This often creates a conflict with custom scripts: Because the Popup is not available in the DOM, the custom JavaScript cannot initialize or load relevant elements. When the Popup is opened, it looks like parts are missing or not working as they should.

How to fix this

There are two solutions for this scenario:

Option A: Use Divi Areas Pro

You can upgrade to Divi Areas Pro. The premium plugin adds a smart Popup initialization logic that is compatible with almost every kind of dynamic content. Note, that you can test it out for 14 days without any risk – just drop us a line within that time and ask for a refund in case the premium plugin cannot display the dynamic content either:

1. Get your license and download the plugin zip file
2. Upload Divi Areas Pro on your website and activate it.
3. Deactivate Popups for Divi.
4. That’s it: The extended premium logic will handle your Popup and initialize dynamic content. No other changes required.

Option B: Customize your code

Of course, you can also make your custom code compatible with Popups. The key to success is, to run custom scripts only when a Popup is opened (not on page load). Our Script Generator can help you get the right code (there are some code samples at the bottom of the Script Generator page)

Sample 1 – Add a click handler to an element inside a Popup

<!-- Original code, does not work inside Popups: -->
<script></script>jQuery('#some-button').on('click', doSomething)</script>

<!-- New code, works inside Popups: -->
<script>(function () {
 DiviArea.addAction('show_area', function (area) {
  jQuery('#some-button').on('click', doSomething)
 });
})();</script>

Sample 2 – Load JS on demand

<!-- Original code, does not work inside Popups: -->
<script src="https://app.mailjet.com/statics/js/iframeResizer.min.js"></script></script>

<!-- New code, works inside Popups: -->
<script>(function () {
 DiviArea.addAction('show_area', function (area) {
  // Load the script when the Popup is displayed.
  var script = document.createElement('script');
  script.src = 'https://app.mailjet.com/statics/js/iframeResizer.min.js';
  document.head.appendChild(script);
 });
})();</script>