Elementor Close PopUp on Click for Menu & Same Page Links
CSS Course ➜
CSS Course Chapters

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

Then, copy the code below in it

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

Finally, verify that it is working fine

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

Tagged

124 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','.elementor-location-popup a', 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/

Leave a Reply

Become the CSS ninja your were meant to be with our CSS course for Elementor users!

CSS Course For Elementor Users
Elementor Close PopUp on Click for Menu & Same Page Links

Awesome new Elementor designs, right in your inbox.

Just fill in your email.

Navigation

Quick links

Social

Make a donation:
Created by
Elementor Close PopUp on Click for Menu & Same Page Links