mermberfix logo x200 - Showing and hiding the Divi Area Popup using inner content as a trigger
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 768x384 - 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.

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.
Announcing our new MemberFix WordPress & Membership Site Care Plans…
Learn how to refund transactions in MemberPress based on refunded charges in your payment processor.
In this article you’ll learn how to automatically make sure that folks who submit a contact form on your site get added as leads in Salesforce
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments