How to close a popup when clicking on linked text to navigate to a anchor point

Hello @tiaancs,

Apologize for the inconvenience!

I can suggest you a Jquery code, hope it will work ??

You can use JS to catch a click on a link in your popup and trigger a close action, ex:

jQuery( document ).ready(function($){
$(document).on(‘click’,’.elementor-location-popup a’, function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
})
});

Now bear in mind that this example is very generic and will close any popup on an anchor click, so you might want to adjust the selector (‘.elementor-location-popup a’) to something more specific.

Regards,
Syed

Thank you for the feedback Syed.

I put the code into the body section in the Divi themes option, I also tried adding it as shortcode directly onto the home page.

It does not seem to trigger the desired response.

I see that your code is for the “elementorProFrontend” should I just replace this with divi?

Hello @tiaancs,

Apologize for all the inconvenience!

Please give me sometime and I will revert back to you next week with the solution.

Regards,
Syed

Hello @tiaancs ??

The plugin does not recognize anchor links for on-page navigation. As you mention, the page already scrolls to the right position, but the Popup will not automatically close; at the moment this is intentional, but I’ve added that suggestion to our feature request list.

You can use a small JavaScript snippet to get you desired behavior. The following code should solve the issue – add it either into your Popup (inside a Code Module) or to your website (via wp-admin > Divi > Theme Options > Integrations)

<script>
jQuery(document).on(‘click’, ‘.area-outer-wrap a[href^=”#”]’, function() {
??DiviArea.hide();
??return true;
});
</script>

This script will monitor all links inside any popup that start with an ?#“ (= all anchor links). When such an anchor link is clicked, the script will call DiviArea.hide() and then scroll to the specific anchor.

Let me know if that solves the issue for you ??

Regards,
Syed

I’m having the same issue. I have entered the code in the popup row. pace scrolls to #point but Pop up does not close.

I have also entered it in the Integrations section in “Add code to the < body >”
no joy.

(does it hurt to do both ?)

What I really need is a button with “NEXT” to close the popup.

Hello @guymayer,

I am sorry for the trouble you have with our plugin. I did try to reproduce the error on my site but couldn’t do so.

Could you add some more details on that issue?

– What is the URL of the website?
– What browser and operating system do you use?
– Where do I need to click to see the Popup?

Regards,
Syed

Hy Syed,

many thanks for the advice.
Code placed Row above the blurb in the popup
https://zoom-photo.co.uk/area51/#testpopup
Click on the yellow button
I have placed 3 links and a button. see results underneath.
Chrome on Win 10

code used <script>
jQuery(document).on(‘click’, ‘.area-outer-wrap a[href^=”#”]’, function() {
DiviArea.hide();
return true;
});
</script>

Hello @guymayer,

Can you please share the screen capture of the code you have entered? I am sure there must be something missing.

Regards,
Syed

as requested
visit https://zoom-photo.co.uk/wp-content/uploads/2020/09/Popup-script-scaled.jpg

Could there be another plugin or script interfering with it? I use Bloom and monarch too …
Thanking you in advance
Guy

Hello @guymayer:)

I noticed that you are not putting any link in the href. You need to replace the “#” sign with the desired link. Let me know, if there is any issue.

Regards,
Syed

Thank you for your time! It’s appreciated.