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

203 Responses

  1. Definitely... live sarver! Would you please help me getting it to close only on specific buttom click.
    I´ve modified it by adding the Button Name "yes" before click for it to close only on this specific button click and do something else on the second one.

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

    Thanks in advance for all your help!

    1. Hey Juan! your code attempt won't work, as 'click' is the event listener, not the selector. $(document) is what need to be replaced.

      Give your button the CSS class 'yesclick' , the use that code:

      <script>
      jQuery(function ($) {
      $('.yesclick').on('click', function (event) {
      elementorProFrontend.modules.popup.closePopup({}, event);
      });
      });
      </script>

    1. You didn't copy paste the code properly. You have all kind of spaces in there, where they should not be, and that's why it's not working... rewrite it like this precisely, no spaces:

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

      1. Use the Elementor html element (with the icon) , not the one with the WordPress icon

      4. Hey man, I need your help haha. I created a popup menu and when I use your code, everything works fine, but when I have one more popup like WhatsApp icon where to open a other menu, when I click on it icon, its close.

        Well, How can I close a specific Section on elementor using your code?

      5. Good question!

        Here is how, 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.

  12. Thanks for this! I've tried doing this, however after adding my pop-up still doesn't close and infact the close button/clicking out of overlay doesn't close the pop-up.

    Would you have any ideas as to why it's not working? It's the first link on the pop-up and I have this showing on mobile only

    staging3.entertainairs.com

  13. Hey! This seems simple enough, but I'm struggling a bit to find where I need to add the HTML element. Would appreciate your help 🙂

    Thanks in advance!

  15. I am trying to get this to work but nothing happens. I have a button on a page which loads an elementor popup with a form. When the user submits the form it loads a thank you popup to say I have received the form. The user can then close that popup with a click but the original popup is still there. I put this code into an HTML widget on the original popup template but when I click on the form submit button nothing happens to close the popup.
    Can anyone help as its driving me nuts!

  17. hello dear guys

    how can i use this code for a specific popup? the problem is this code close all the popups on the page .... ?

    i am not god at programing, can someone help me please ?

  18. Hi Bro, It was a headache, I was having a problem with elementor pro popup so I switched to jet-popup. The problem is this js code is not working with my popup. Can you give me a new piece of code? This popup is located in the article table of contents button. I want when I click on any anchor area on the popup it will jump to that anchor and disappear the popup. Sorry for using google translate, because I'm not good at this language, I'm from Vietnam. Thank you very much.

    Link : https://bit.ly/3yFw69k

  23. first, thanks for the code! is it possible to close the window after click AND cursor outside / "hover:not" - this would be very nice at a onepager. because you can step along the page in one flow and than it's closing automatically 8)

    1. Yep that's possible. Be aware of the SEO consequences of using a popup for your navigation though : https://element.how/why-elementor-pro-popups-are-terrible-for-seo/

      Otherwise, for what you want, this code should work :

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

  25. Great piece of code, thank you very much! It works great!

    One question - when I click any other links (not in main nav bar) in the popup, it still closes it. How can I avoid that?

    All the best!

    1. Hey Matej!

      In the code, you will see '.elementor-location-popup a'

      Change that CSS selector to match only the URLs you want to close the popup when clicked on!

    1. Hey Andi!

      Yes it's possible to have it close... add

      $('.hamburger').eq(0).click();

      after

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

      in the JS and it should work!

      1. Didn't work for me, but I found the issue:

        Like Andi above I also have use your animated icon tutorial to create a beautiful popup menu (and yes I'm aware of the consequences, hehe 😊).

        As Andi also asked the code for this tutorial only closes the popup, but doesn't trigger the icon before closing the pop-up, which results in the icon staying as a "X". (or whatever active state icon you use)

        I had to add the class ".is-active" to your snippet for it to work, so the code will be:

        jQuery(function(jQuery){
        jQuery(document).on('click','.elementor-location-popup a', function(event){
        elementorProFrontend.modules.popup.closePopup( {}, event);
        jQuery('.hamburger.is-active').eq(0).click();
        });
        });

  27. Aint working for me unfortunately.. dno why.
    I've added the html widget in the same column as the navigation widget on mobile view. The menu calls for an anchor on the site but doesnt close after the click.
    Any ideas?
    ¨
    (mobileview)
    https://hatchlingznft.com/

  28. @Maxime I also discovered that if you use Prevent Page Scrolling on your popup and just close the popup with your code, then the css hangs onto the , which prevents the website from scrolling anywhere unless refreshing.

    I assume that Elementor doesn't recognise the custom jQuery click function, so it keeps the code... what can be done to fix this issue?

    This code is the problem:

    .dialog-prevent-scroll {
    overflow: hidden;
    max-height: 100vh;
    }

  32. This works great thank you so much!

    Is it possible to identify a specific ID of a popup to close? I have a popup opening a popup, but want that first popup to not close when a link is clicked in the second popup (second popup is one page menu on mobile, first popup is bottom sticky button to open up second popup).

    1. Hey Tie!

      Good question!

      Here is how, 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.

  33. hey how to close the pop in one click, i mean i have to click it twice for it to be closed, any idea?

    i'm using premium button from premium addons

  35. I created a popup on the "Simple Motion Switches" images. I want the popup to close after I click "Select Your Package" because I've attached an anchor link to it. But it won't close

      2. I just checked and your code is different... and it's not in every popup...

      3. Hey Maxime! Ya it's only in the popup that appears when you click the "Simple Motion Switch" image

    1. Hey Ester!

      Welcome!

      And here is how... Change the similar line of code, to this :

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

      Cheers!

  40. Im using an extra plugin for users to select product categories. The script doesn't work on the button generated by the plugin. I've tried adding other classes than the ".elementor-location-popup a" in Maxime's example.

    Would it be possible for you to look at the site and provide the solution? 🙂
    Site adress: https://kunstvanmetaal.nl/winkel/
    Side note: Popup only activated for Tablet and mobile
    Tap the "Categorieën" button to open the popup

    1. Hey Michel!

      You don't have the proper code in there... you have this:

      window.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $(document).on('click','.elementor-location-popup a', function(event){
      elementorProFrontend.modules.popup.closePopup( {}, event);
      $('.hamburger').removeClass('is-active');
      });
      });
      });

      It should be

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

      And also, exclude it from WP Rocket delay JS by adding ".hamburger" there.

      Cheers!

  42. Hey!
    I wanted to ask, is it possible to get the popup to close when clicking on a certain menu item.
    For instance I changed the 'document' value to a certain Css id, because the code was opening the popup even when I clicked contact form button.
    So right now, the issue is gone, only the right popup opens, but after clicking the menu item it does not close. I added the css id to all the menu-items, but still, it is not closing.

    The code is following.
    script>
    jQuery(function($){
    $('#yesclick').on('click','.elementor-location-popup a', function(event){
    elementorProFrontend.modules.popup.closePopup( {}, event);
    });
    $('.elementor-location-popup').mouseleave(function(){
    elementorProFrontend.modules.popup.closePopup( {}, event);
    });
    });

    1. So basically, I have multiple popups. Contact popup and menu popup. They are defined by button click and a certain popup opens, but if im using your code above, when going first to the page, and clicking I accept on cookies bar button, the menu popup, where the code is also opens...
      Hope you get the idea - is it somehow changable?

    2. Do you really want just want it to close after clicking the menu item? How is that popup opened to start with?

      Also, what you describe is from your popup conditions... if you click the "accept cookie" button and your popup opens, this has nothing to do with the code I provide in this tutorial. That code only closes popup, there is nowhere where it would trigger one open.

      The problem is in your conditions, under "triggers", you probably added "click". Remove this.

      1. Right, so right now the popup opens via the elementor link (dynamic tag - popup open).

        Yeah, I want to close the popup on menu click, because I have a one-pager that will anchor to a certain section after the click, therefore I need the popup to close after the click on menu item.

        Thanks in advance! 🙂

  43. The code you shared, simply won't work. You can't add a CSS ID to more than one item without generating invalid HTML.

    Even if you could, that modified JS you have won't work. Use the code I provide in the tutorial and follow each step, it will work as expected, as it did for so many others.

  44. When I put this code in HTML i cant update the website, it says there is a 404 server error. This only happens when I put the code, the page can save with the empty html but no with this code

    1. This is usually because of a security plugin such as WordFence. Or maybe your user doesn't have the proper permission. Try as an admin.

    1. Hey Devendra!

      Use the following code to achieve this. Add it all in an HTML element on the same page(s) where you need it. Give the class name "close_e_popup" to the popup closer element.

      <script>
document.addEventListener('click',function(event){
if (event.target.classList.contains('close_e_popup') || event.target.closest('.close_e_popup') ){
elementorProFrontend.modules.popup.closePopup( {}, event);
}
});
</script>
<style>
.close_e_popup{
                cursor:pointer;
}
</style>

      1. Hii Maxime,
        I tried your above code but didn't achieve what I really want, your above script only closes a single popup at a time when we click on any element which contains the class "close_e_popup".
        In my scenario, I have opened multiple Elementor popups overlaying one on another, Here what I need is - A button or icon which can close all the overlayed and current popups on a single click, which means if someone clicks on that icon - not a single popup should be opened there.
        To make you more clear sharing my website link with you,
        https://ultrafebtech.com/dev/
        (Please navigate to - Hamburger Menu on the Left at header > Products > Size Reduction Machines)
        Now here on "Size Reduction Machines" Popup - I need a button/icon which can close all three opened popups.

      2. Hey Devendra!

        Try this code instead, and set your popups setting so that clicking outside closes the popups.

        <script>
document.addEventListener('click',function(event){
if (event.target.classList.contains('close_e_popup') || event.target.closest('.close_e_popup') ){
document.body.click();}
});
</script>
<style>
.close_e_popup{
                cursor:pointer;
}
</style>

        Let me know if that works!

    1. Greetings,

      What you have there is a JetSmartFilters drop down... this tutorial is about Elementor Pro popups. It won't work for JetSmartFilters drop down select field...

      1. oohhh what a pity!
        is there any change I can do to the code for that to work? or would be too much complicated?
        thanks for having a look

      2. Sorry, the code for this would be completely different... Try asking Crocoblock's support, maybe they can help!

  52. Hi Maxime! I created a popup as big as the screen that appears when the page is loaded, with no other free spaces and can't click out to close it.
    Is there a way that the popup closes when the user clicks anywhere on the popup? It contains no buttons or links, just a few images that change depending on where you move the mouse cursor. If needed, I'll provide a link too.

  53. Hi, I am having trouble getting my pop-up to close on mobile. My menu uses custom anchor links and I would like the menu to close after clicking on a link.

  55. hello, dear friend. tell me, please, is there such an opportunity to add such a code to the jet menu from the crocoblock or or tell me, please, in which direction to move, to search? to add such code.

  56. Hello,

    Love this code, it works perfectly! Quick question please, so I have a pop up off canvas menu, all the menu items are fine as they are click, however I have one menu item that is an anchor link.

    I added the code and it works but it closes when I click on a menu drop down, so I cannot select the sub menu item.

    I tried adding 'yesclick' to CSS id on the menu section of my anchor menu, and added the other code you mentioned but it's not working.

    Hope the above makes sense!
    Thank you

    1. Greetings Anam,

      Try with this code instead:

      <script>
jQuery(function($){
$(document).on('click','.elementor-location-popup a:not(.has-submenu)', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
});
});
</script>

    1. Hey Chan!

      You aren't using an Elementor Pro popup though... and I don't see the issue either... maybe you changed your setup since making the comment?

      1. Hi Maxime, thanks for your reply, the issue still remains.

        How to replicate the issue?
        1. Using mobile, click on the mobile menu toggle and select Skin Concerns.
        2. Using mobile, select the sub menu, Melasma and Pigmentations

        You will notice the page menu anchor down, but the mobile menu wasn't toggled.

        Can I check how to make the mobile menu toggled?

        https://onefaceskincare.com.sg/

      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...

  62. 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();
        });
    });
});

  63. 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!

  65. 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!

  67. 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.

  68. 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.

  69. 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!

  70. 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?

  71. 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.

  74. Hello,

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

    Thanks,
    Marko

  77. 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!

  80. 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.

  81. 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

  86. 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 ?

  87. 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>

    ´´´

  90. 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

  91. 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>

  92. 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.

  93. 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!

Leave a Reply