Showing and hiding the Divi Area Popup using inner content as a trigger

Divi Area Popups have a limited amount of triggers.

And if you want to link it to Memberpress login form success/failed response you won’t be able to do it from the admin panel.

So today I will show how to do it using Divi Area JS API.

The result will be the popup that will be triggered on the some dynamic message.

What You’ll Need For This Tutorial

1 – Divi Area Pro plugin 

2 – Memberpress plugin 

3 – Divi builder 

Create and link the popup

1.1 – Open the Divi Area section.

1.2 – Click on the “Add new” button.

1.3 – Enter the popup content. I will add the Memberpress login form. 

1.4 – Choose the condition where do you want to open this popup. I will choose to open it on a specific page.  

1.5 – Save the Divi Area Popup.

Create a JS script to manage popup

2.1 – Create a code block on the page where you want to use your popup 

2.2 – Add the next script there:

2.3 – You only need to insert the popup ID you see on the popup admin page instead of #regPopup. 

2.4 – If you want to trigger the popup on another message or content appearing you need to change this part .find(‘.mepr_error’) and add the ID or class you need.

2.5 – If you want to hide popup instead of showing you can change the DiviArea.show to DiviArea.hide function.

2.6 – Save the changes you made on the page.

That’s all.

Now every time the Memberpress error will appear the popup will show up and the user will see it. 

Now let’s hear from you!

Are you using Divi Content Area?

Tell us how in the comments section below!