mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

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

DIVI AREAS PRO

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.

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

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.

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

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

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

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

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

 

1.5 – Save the Divi Area Popup.

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

Create a JS script to manage popup

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

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

2.2 – Add the next script there:

<script type=“text/javascript”>
    window.addEventListener(‘load’, function () {
        var meprError = DiviArea.getArea(‘#regPopup’).find(‘.mepr_error’);        
            if ( meprError !== undefined ) DiviArea.show(“#regPopup”);
    });
</script>

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

 

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

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

 

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.

 

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

 

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

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

 

2.6 – Save the changes you made on the page.

 

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

 

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!

What do you think of this tutorial?

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

Book Description: How to show or hide the Divi Area Popup according to content that appears on this popup.

Book Author: Victor Barannik

Book Edition: Memberfix

Publisher Logo: mermberfix logo x200 150x41 - Showing and hiding the Divi Area Popup using inner content as a trigger

User Review
0 (0 votes)

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
How to fix “background request blocked” error while using WordFence security plugin in conjunction with OptimizePress
Learn how to hide or move your post or page title in the Divi Theme without affecting your category view or creating duplicate titles.
Learn how to easily remove access to Teachable based on Stripe subscriptions in an automated way by using Zapier.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments