Get Premium

Close your Pop-Up Menu on Link Click

For those using same page links.

Read first: readers should be aware of the SEO consequences of using an Elementor Pop Up as your core navigation.

To begin with, insert an HTML element in the same popup as your menu

This will make Elementor close popup on click. After adding the code.

Elementor Close PopUp on Click for Menu & Same Page Links 1

Then, copy the code below in it

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Close PopUp on Click for Menu & Same Page Links tutorial 
 * Found at this URL https://element.how/elementor-close-popup-on-click-link/ 
 */ 
</script>

Finally, verify that it is working fine

That's it! Short and simple! Thanks for reading!

Tagged ,

214 Responses

      1. I want the menu to close when any tab is clicked on the mobile menu on my site. how can I do that?

      2. You add the HTML element WITHIN the popup. Then the code goes IN the HTML element.

        I hope it's more clear now. I don't really have any more ways of saying this...

  2. Hi

    Thank u for sharing this. Its looks like this code only works for Elementor pro popup. I have tested it on Crocoblocks Jetpopup, but not working. Really hope u can help. Thank u

    1. Greetings!

      Try this code and let me know if it works.

      document.addEventListener('DOMContentLoaded', function () {
    let popupLinks = document.querySelectorAll('.jet-popup__inner a[href^="#"]');
    popupLinks.forEach(function (link) {
        link.addEventListener('click', function (e) {
            let popupClose = link.closest('.jet-popup__container').querySelector('.jet-popup__close, .jet-popup__close-button');
            popupClose.click();
        });
    });
});

  3. Hello Maxime!

    I have the same issue as Anam above.

    I have an off-canvas elementor popup with a Navigation Menu element with in it.
    I am using a custom menu option with regular menu items and sub-menu items.
    I have tried the code that you provided to Anam, on 07/04/2023, but when I click the carat to expand and view the sub-menu items, the popup closes and does not give me the chance to click on the sub-menu items. Thanks for your help!

    2. Hey Ryan,

      That other code didn't work because you are using a third party for your Nav Menu (ultimate addons for elementor).

      Try this code:

      <script>
jQuery(function($){
$(document).on('click','.elementor-location-popup a:not([aria-haspopup="true"])', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
});
});
</script>

      Cheers!

      2. Hello Maxime.

        It looks like this code doesn't work, and the popup is immediately closing upon expanding submenus. Maybe this was due to a an elementor update?

        Thanks!

      3. Greetings Ryan,

        As our thread indicate, you are using a third party for your navigation... Maybe they had some update that made the previous code not work anymore.

    1. Hey Fabio!

      Elementor Popups are a Pro feature, so of course my snippet will only work if you have pro.

      Also I don't have a YouTube video about this...

      Cheers!

  5. i have a TOC which it is sticky on the header. It also closed by default. can i close it after clock a link using this code?

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

    1. Greetings,

      For that, use this code:

      document.addEventListener('DOMContentLoaded', function() {
  const tocBody = document.querySelector('.elementor-toc__body');
  tocBody.addEventListener('click', function(event) {
    if (event.target.tagName === 'A') {
      const collapseButton = document.querySelector('.elementor-toc__toggle-button--collapse');
      if (collapseButton) {
        collapseButton.click();
      }
    }
  });
});

      Cheers!

  7. Hello Maxime, once again resorting to your excellent tutorials!

    Consultation: In a popup I need to place 2 buttons:

    1 to return to the previous page, and another to close (or accept and close) the popup.

    Will you provide me with the code, since I can't find how to add the one to return to the previous page...

    Thank you.

      1. Hello Maxime,

        Thank you very much for that link, my button to "return to a previous page" now works!

        Then I tried to use your code to close the popup with a button:

        jQuery(function($) {
        $('.yesclick').on('click','.elementor-location-popup a', function(event) {
        elementrProFrontend.modules.popup.closePopup( {}, event);
        });
        });

        But it didn't work for me, I tried some modifications, and this one did work 🙂

        jQuery( document ).ready( function( $ ) {
        $( document ).on( 'click', '.yesclick', function( event ) {
        elementrProFrontend.modules.popup.closePopup( {}, event );
        });
        });

        Maxime, I would like this window to only be seen by already logged in users, and not appear again once closed (until the user logs out), is it possible with Elementor Pro and some other code?

        Thank you very much for your usual help, I continue to learn a lot from it.

        Saludos.

  8. Hi Maxime,
    Thanks for all of your tutorials and snippets.
    I have something strange going on.
    I have 4 popups. 1 menu that controls the other 3. Each of the 3 should be on screen until manually closed.
    The built-in function of closing one when another is clicked works great, but only when "close on overlay" is NOT prevented. This means the popup menus close when a user interacts elsewhere in the page. Not ideal for a permanent menu.
    Turning on "Prevent Closing on Overlay" ( & ESC) no longer closes the previous popup when another is clicked.
    I thought...why don't I use Maxime's excellent closing code. This, unfortunately, only made things more strange.
    Using the jQuery
    elementorProFrontend.modules.popup.closePopup( {id:11850}, event);
    only closes the main menu popup (11845). Whatever I try, 11845 is the only popup that gets closed.
    I have tried moving the HTML widget, but the same result is present.
    You can have a look here (to test, button 3 has no code):
    https://petrolink.no/nb/akerbp-system-menu/
    I hope your eagle eye can spot something simple I have missed.

  9. Greetings Dave!

    This is getting quite specific! And into custom work territory...

    Try having the HTML in each respective popup they are supposed to close (if I understood correctly what's required here)

    Cheers!

    1. I'm not one for doing things the easy way. Thanks for taking the time and the tip.
      I've tried each "close" script in each popup, but still the same effect. 11845 closes!
      Think I'll have to find another way.

      1. Got it working, but not with jQuery unfortunately. Looks like an error due to the fact that I was closing popups that were not open (ie. did not exist).
        I just made the close button hidden (same as background color) and clicked the right ones if they existed.

        var selection = document.querySelector('.CSSCLASS .dialog-lightbox-close-button');
        if (selection !== null) {
        document.querySelector('.CSSCLASS .dialog-lightbox-close-button').click();
        };
        Works great now!
        Thanks for your time, and I look forward to your tips and tricks helping me again in the future 🙂

      2. Hey Dave!

        That's clever, good job. Glad you got it working!

  10. Hello. I have a popup as a menu for mobile. When pressing "vanliga frågor" the page scrolls to the right section as it should. But I also want the popup to close when pressing that button.

    I´ve added "closeclick" as CSS Class inside WordPress menu options. And changed the code accordingly to previous comments but can´t get it to work.

    I´ve also set in/out animation to only desktop.

    My page link is https://xn--massageakutengvle-3qb.se/

    Do you have any ideas what the problem might be?

  11. First of all - thank you for this code, works perfect with my mobile menu.
    But... since I implemented this code only into mobile menu, it seems it works for all popups on my site.
    I have another popup with button which opens another popup and they both should be opened at the same time. Before implementation of your code it was working very well. Afterwards, clicking the button in the popup opens the new one but closes the opened one.

    I tried your modification with giving specific popup id but no change.

    Do youhave any idea what can be a reason? Is there better way to specify which popup should get closed? Or maybe it's possible to implement some exceptions?

    Anyway - thanks a lot for your support!

    1. Hey Lukasz!

      Yes the solution for this is usually as follows.

      Simply change this line here :

      elementorProFrontend.modules.popup.closePopup( {}, event);

      to

      elementorProFrontend.modules.popup.closePopup( {id:498}, event);

      Then, change '498' to the actual ID of your popup. You can find it by looking at the URL when you are in the Elementor editor.

      But you are saying it's not working for you? Where do you have the code?

      1. Hi Maxime,

        So I'm back to this problem (after many attempts I decided to leave it and imagine it didn't exist 🙂 hoping it could be self-solved but now I'm almost ready with my site and the problem is painfull)...
        I placed the code in HTML widget in the popup. I have three Popups in Mobile Menu (Main Menu - there I have (among other link) two links (Competencies and Shop) which open another menu popups with links in these categories) so I placed in all of them HTML widget with Your code and ID's of these popups:
        i.e.
        Popup 1 - Main Menu

        jQuery(function($){
        $(document).on('click','.elementor-location-popup a', function(event){
        elementorProFrontend.modules.popup.closePopup( {id:14425}, event);
        });
        });

        Popup 2 - Category Competencies

        jQuery(function($){
        $(document).on('click','.elementor-location-popup a', function(event){
        elementorProFrontend.modules.popup.closePopup( {id:14218}, event);
        });
        });

        Popup 3 - Category Shop

        jQuery(function($){
        $(document).on('click','.elementor-location-popup a', function(event){
        elementorProFrontend.modules.popup.closePopup( {id:14425}, event);
        });
        });

        and as before - it doesnt work - it still works for all popups on my whole page. I could even leave with this issue but since I created one popup with a form - it's really painfull because it closes it after clicking 'submit' without message that the form has been sent.

        Regards,
        Lukas

      2. so I think I found the solution...
        * firstly I tried with general code - it worked very nice but not only for specific popups where the code was placed but for all popups on my website
        * then I tried with popup's id - it worked not really good for specifica popups (it caused some mess - sometimes i needed to click twice on X to close it) but again it worked for all popups on my website
        * then I tried to add CSS ID's to the triggers of new popups - in my case it's containers - and reaplced $(document).on('click','.elementor-location-popup a', function(event) with $(document).on('click','.#my-new-css-id', function(event) but elementorProFrontend.modules.popup.closePopup( {}, event); i left as it's here,w ithout specifying popup id - and now it warks properly! the only one thing is - i lost sliding animations in this popups, but I'm not sure it depends on this code or it's some elementur bug

        What do you think about this solution?

      3. Hey Lukasz!

        Sorry I admit I'm not 100% following everything you wrote... Your situation is quite specific and I'd probably need an hour or so to get a proper understanding of what needs to be done, and find a solution. More than I give for free in these comments section. Hope you understand.

        Cheers!

    1. Greetings Kaleem!

      This tutorial is for popups made with Elementor Pro popup templates.

      On your site you are using some other popup solution. It won't work with it.

  14. Hello,

    How could we use this to close Elementor new Mega menu content when clicking on some link whitin mega menu content?

    Thanks,
    Marko

  17. Hi,

    This is really great and seems to be half working for me. I noticed earlier on in the thread that somebody was using an addon which meant you need to change the code. I'm using essential addons 'simple menu' for my mobile site and ElementsKit 'Mega Menu' for my desktop site.

    I'm experiencing the same issue of the pop up not closing on both of these.

    Could you advise some custom code that will solve this issue please?

    https://devtest631391.alsim.co.uk/how-we-work

    Thank you!

    1. Hey Stan!

      Sorry this tutorial is specifically about closing an Elementor Pro popup on link click.

      The other place where I helped a user, he had a Nav Menu element from an addon within an Elementor Pro popup, so he still needed to close the popup.

      To close various elements from addons on link click however, you are better trying to reach out directly to the vendors and asking them for help.

      Hope you understand.

      Cheers!

  20. I have two popups opening, I made a header when anyone clicks on the menu, the first popup opens and inside it when anyone clicks on the heading it opens the 2nd popup. I have added a small heading with an image in this 2nd popup when anyone clicks on it closes the popup and it gets back to the first one which was open before.

    I used this code to only close the selected popup but still, it is closing both popups. Can you help me out with this please:

    jQuery( document ).ready( function( $ ) {
    $( document ).on( 'click', '.mobile-menu-2nd-tab h2', function( event ) {
    elementorProFrontend.modules.popup.closePopup( {id:12624}, event );
    } );
    } );

    1. Sounds like your first popup might be set to close on outside click... first thing would be to disable that, if it is indeed enabled.

  21. 1) how can we adjust it and use it with Elementor (no pro)? before purchasing pro I'd like to know if the free version suits such need.
    2) I'm trying to use it when clicking on a button , no text. same thing?
    thanks!

    1. Sorry Web, the current tutorial is to close an Elementor Pro popup on link click. You aren't using an Elementor Pro popup...

      1. Okay, then how can I solve this? I have linked using the section CSS ID

  26. HI all,

    so the code is almost working perfectly for me, i am using 2 pop ups, one as an vertical menu when you click it it will open my 2th menu with the navigation. My idea was to close the 2th pop with this code. But when using it it closes all the pop ups and first one is not more visible.

    any chance i can modify code to close only the 2th pop up ?

  27. para usar con los filtros de crocoblock y off-canvas (es para el boton aplicar filtros)

    ´´´
    <script>
    jQuery(function($){
    $(document).on('click', '.apply-filters__button', function(event){
    // Cerrar el Off-Canvas
    $('#off-canvas-a7aae2e').removeClass('e-off-canvas-open').attr('aria-hidden', 'true');
    });
    });
    </script>

    ´´´

  30. Hi, Congrats on your site and great work. thanks for the code, too. For me it is not working somehow. Withouth the code, the page scrolls to the specific section after clicking the menu buttons (popup not closing), with the code, the popup closes, the page starts to go down but acts like hitting a wall and stoppes, Any idea what causing this and how to fix it? thanks a lot in advance. Csongor
    https://istvanorosz.com

  31. Thanks, Maxime! This worked perfectly on a popup template containing a menu with anchor links. Wonderful!!

    However, I am also working on a page containing a sticky header with a menu. It also has anchor links but no popups. Can the code be modified to apply to a non-popup menu?

    1. I found a way. Not sure if it is the best, but it seems to be working. Let me share in case anyone else is trying to do the same thing. In the html widget, I used the following code:

      <script>
      document.getElementById("e-n-menu-content-1421").addEventListener("click", hidemenu);

      function hidemenu() {
      var x = document.getElementById("e-n-menu-content-1421");
      x.style.display = "none";
      };
      </script>

  32. Hey Maxime,

    I've read through each reply in hopes of finding a solution. However for whatever reason it isn't working for me. (Maybe because I'm not using a menu)

    I added the code to the html on the popup template however it's still not working.

    I want it to close when the button "Let's Get Started" is clicked. That button go to anchor on the same page the pop up loads.

    Below is the page.
    https://youngaltus.com/

    Anyone please help.

  33. Didn't work for me. I add the code into an HTML widget in the popup, but when I test it, the pop-up closes, then the page scrolls slightly down, then back to the same place I originally clicked to invoke the pop-up. I copied the code using the button on this page. Any ideas?

    1. Greetings,

      the tutorial is only about closing the popup on clicking an anchor link, so if the popup closes, it works as intended.

      The behaviour your describe presents another issue, there could be many causes and fixes for this, it's not possible for me to address them here... Sorry!

  37. The code worked straight away! The previous pop-ups close with the close animation. Great! Thank you very much for this great tip.

  38. Hello! Can this work on a taxonomy filter inside of an off canvas in Elementor? If I click one of my taxonomy choices (buttons) is this the way to close the off canvas? Or only for popups and anchors? I'm glad Web Squadron lead me here!

      1. Hello Maxime! it's a staging site behind a coming soon, can I reply to your email directly to make this happen?

  39. Quelqu'un de votre coté à le meme probleme que moi. Une fois le lien (anchor) cela scroll dans au bon endroit et remontre en haut en vitesse ?

      1. Hi Maxime,

        Thank you this new version fixed it, working perfectly. Thanks for creating this and sharing the how to.

        Regards
        Phil

Leave a Reply

Element.How Newsletter

Sign up for our newsletter to get Elementor related updates and tutorials

Close