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

[et_pb_section fb_built=”1″ _builder_version=”4.8.0″ _module_preset=”default”][et_pb_row _builder_version=”4.8.0″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.8.0″ _module_preset=”default”][et_pb_text _builder_version=”4.8.0″ _module_preset=”default”]

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:

[/et_pb_text][et_pb_text module_class=”mfcodes” _builder_version=”4.0.9″ text_font=”Source Code Pro||||||||” text_font_size=”15px” background_color=”#eff0f4″ custom_margin=”||20px|16px||” custom_padding=”3%|3%|3%|3%” z_index_tablet=”500″ border_width_top=”7px” border_color_top=”#0c71c3″ border_width_top_tablet=”7px” border_width_top_phone=”7px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”][/et_pb_text][et_pb_text _builder_version=”4.8.0″ _module_preset=”default”]

 

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. 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_4,3_4″ make_equal=”on” _builder_version=”3.25″ custom_margin=”||30px|” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|phone” custom_padding=”0px|0px|0px|0px” border_width_all=”1px” border_color_all=”#2ecc71″][et_pb_column type=”1_4″ _builder_version=”3.25″ background_color=”#2ecc71″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_blurb use_icon=”on” font_icon=”%%83%%” icon_color=”#ffffff” _builder_version=”4.8.0″ custom_margin=”30px||5px|” custom_padding=”|||” custom_css_blurb_image=”margin:0;”][/et_pb_blurb][/et_pb_column][et_pb_column type=”3_4″ _builder_version=”3.25″ custom_padding=”30px|20px|20px|0px” custom_padding_tablet=”” custom_padding_phone=”0px||30px|20px” custom_padding_last_edited=”on|phone” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.8.0″ text_font=”||||||||” text_line_height=”1.6em”]

Now let’s hear from you!

Are you using Divi Content Area?

Tell us how in the comments section below!

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.8.0″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.8.0″ _module_preset=”default”][et_pb_text _builder_version=”4.8.0″ _module_preset=”default”] [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]