Popup not showing up in front end

The problem is that when you add a link to a section, row, column, or module in Divi now, Divi doesn’t use an a tag to make it a link. They use javascript. This plugin requires them to be standard a tag links. Hopefully the plugin developer can fix this.

For those of you looking for a solution, I added the following javascript to my theme:

jQuery(“.trigger-popup”).on( “click”, function() {
var trigger = jQuery(this).attr(‘id’);
trigger = trigger.replace(“trigger-“, “#”);
DiviPopup.openPopup(trigger);
});

Then instead of using the Link field, I add a class of “trigger-popup” and an ID of “trigger-my-popup” where “my-popup” is the ID of your popup.

Thank you for your answer.
Doesn’t work for me, guess it’s because I’m in a full-width section.

I tried to email the developer, but didn’t get an answer.

Hi @fbk93

Thanks for reporting the issue and getting in touch! ??

I actually did test the Popup For Divi plugin with Divi 3.19.18 and everything does work as expected for me.

It’s great, that you have posted the link to your dev page! I think I found the problem in your setup:

1. You did copy-paste the code snippet from @joelnewcomer directly from the website. WordPress replaces some code-characters with different “more stylish” characters. In this case, all double-qoutes (“) were replaced with some kind of curly quotes (they are slightly slanted). However, javascript does not recognize this character and throws an error.

2. The actual problem is the class name, which you added to your Divi sections: I see that you added “trigger-popup” to the section, instead of only “popup”.

What you need to do to get the popup working:

1. Remove the custom code again from your page
2. Also remove the class “trigger-popup” from the header-module in your Step 3 section
3. Create a new Divi section (possibly the section with a Contact form) and give the section the class “popup” + the ID “contact-form” (as an example)
4. Edit the button “Jetzt Kontakt aufnehmen” and set the link to “#contact-form” (i.e. to the ID that you just used for your popup-section)

Save it and everything should work.

Let me know how it went. Philipp ??

@joelnewcomer, thanks for your input! It’s an interesting idea to add those custom triggers. For the next update, I will include this, so you can actually use the class name to trigger a popup ??

However, I will possibly combine the trigger class and popup ID via an prefix, like here:

<image class="trigger-popup-contact-form" /> .. open the popup "#contact-form"
<image class="trigger-popup-subscribe" /> .. open the popup "#subscribe"

In any case, there will be a notice/description in the changelog and on the website ??

Philipp

Thank you Philipp! You are awesome!

I’m actually seeing this same issue @strackerphil-1. I added my id to a text element AND tried adding it to a h4. Neither are getting tags added so neither are opening. When I add it to an image it works just fine though.

@maspegren I think you have configured the wrong element, and this is why the popup does not work.

* Add a custom ID to your SECTION, e.g. “demo-popup”
* Add the CLASS “popup” to the same SECTION. Now you should see a visual “preview” inside the Visual Builder (the background of the popup becomes grey, …)
* Lastly edit a BUTTON or a LINK and set the link URL to point to the custom ID, e.g. to “#demo-popup” (remember to add the “#” to the URL)

Now the Button will trigger the specified popup when clicked. In case you still have troubles with your popup, can you please open a new thread here with a link to a demo page where I can inspect the popup and link settings?

Thanks, Philipp

@joelnewcomer the next update of the plugin (v 1.3.0) does include the “trigger-by-class-prefix” feature described above.

You can then add the class “show-popup-NAME” to any element, e.g. to an image module. When the module is clicked, the popup “#NAME” is opened.

Philipp ??