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’)[0];        
            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. 

t

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)