Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popup - Close when you click on a button #7085

Closed
MichaelDarko opened this issue Feb 14, 2019 · 26 comments
Closed

Popup - Close when you click on a button #7085

MichaelDarko opened this issue Feb 14, 2019 · 26 comments

Comments

@MichaelDarko
Copy link

@MichaelDarko MichaelDarko commented Feb 14, 2019

Prerequisites

  • [x ] I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
  • [x ] The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

When you build a popup with any button in it, the popup should close after clicking the button. Or there should be an option to set it like that.

Let's say you have one page website, you create a popup with a button that links to some anchor. When you click the button, the page scrolls to the anchor, but the popup is still there. This makes the popups unusable for linking to anchors, which is pretty bad.

When you click a button in a popup, the popup should go away, that's obvious. When you're linking to some other page, the popup goes away. But you forgot about people linking to anchors within the same page.

I've found other people facing the same problem. For example here:

https://wordpress.org/support/topic/close-elementor-popup-on-button-click/

Please give us the option to close popup on button click.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

@shilo-ey shilo-ey commented Feb 17, 2019

@JoeDarko

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

For now, you can set the link to the anchor and close the popup via custom JS code, ex, give your button CSS class of 'close-popup' and you can catch the click event to close the popup:

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

Thanks for the feedback.

@zeinnicholas

This comment has been minimized.

Copy link

@zeinnicholas zeinnicholas commented Mar 29, 2019

+1

This would unlock so many options on website designing! I always tough that it was a missing opportunity to separate actions from dynamic links, and give them a special place to work besides the link. Just like you did with the form. This way we could not only close but open popups as well on actions like add-to-cart button on.click or other events, like muilti-step popups, and so forth.

@loreez

This comment has been minimized.

Copy link

@loreez loreez commented Apr 5, 2019

@JoeDarko

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

For now, you can set the link to the anchor and close the popup via custom JS code, ex, give your button CSS class of 'close-popup' and you can catch the click event to close the popup:

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

Thanks for the feedback.

Hi, I need to close a popup on click on mobile, I tried this solution and it works fine in Chrome's mobile view, but it doesn't work on an actual smartphone. I added 'touch' along with 'click' but it's still not working. Can you help me understand why? Thanks a lot!

@monkeywhovapes

This comment has been minimized.

Copy link

@monkeywhovapes monkeywhovapes commented May 8, 2019

@shilo-ey , Can you explain more thoroughly about creating the class? I've added the code to the header but I am not sure how to get the onclick class set up for the button. Thanks in advance!

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

@shilo-ey shilo-ey commented May 13, 2019

@loreez commented on Apr 5, 2019, 4:56 PM GMT+3:

@JoeDarko

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

For now, you can set the link to the anchor and close the popup via custom JS code, ex, give your button CSS class of 'close-popup' and you can catch the click event to close the popup:

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

Thanks for the feedback.

Hi, I need to close a popup on click on mobile, I tried this solution and it works fine in Chrome's mobile view, but it doesn't work on an actual smartphone. I added 'touch' along with 'click' but it's still not working. Can you help me understand why? Thanks a lot!

Try changing "click" to "mousedown" and see if it resolved.

@monkeywhovapes commented on May 9, 2019, 2:29 AM GMT+3:

@shilo-ey , Can you explain more thoroughly about creating the class? I've added the code to the header but I am not sure how to get the onclick class set up for the button. Thanks in advance!

Simply set a class to your button and name it close-popup (such as in this example).

@govusfi

This comment has been minimized.

Copy link

@govusfi govusfi commented Jul 10, 2019

Hi, I too wish this to be a core feature soon :) Such a cool way to create mobile menus, but on a onepager the menu should close when user clicks a menu item.

@IanJSaul

This comment has been minimized.

Copy link

@IanJSaul IanJSaul commented Aug 8, 2019

Definitely a great feature to have, simple click to close toggle.

@monkeywhovapes

This comment has been minimized.

Copy link

@monkeywhovapes monkeywhovapes commented Aug 8, 2019

@IanJSaul , this functionality actually exists after all. It is somewhere in the popup settings, I can't remember how I got it to work.

@IanJSaul

This comment has been minimized.

Copy link

@IanJSaul IanJSaul commented Aug 8, 2019

I'm adding the above code to my popup buttons as we speak, on the latest builds, and I'm not seeing that as an option in Popup Settings... If it is here, I'd love to use it!

@tron-git

This comment has been minimized.

Copy link

@tron-git tron-git commented Aug 12, 2019

Hi, I have never used JS / JQuery in an Elementor page, how is this done? I tried an HTML element but I am not sure it's right, or missing some code. Any help is appreciated.

@govusfi

This comment has been minimized.

Copy link

@govusfi govusfi commented Aug 12, 2019

Hi, I have never used JS / JQuery in an Elementor page, how is this done? I tried an HTML element but I am not sure it's right, or missing some code. Any help is appreciated.

Hi, did you paste the code inside <script></script> ?

@tron-git

This comment has been minimized.

Copy link

@tron-git tron-git commented Aug 12, 2019

That did it! I used last time (honestly was just guessing) but yours worked perfectly!
Thank you, and the class worked as well, I ended up setting the class on the entire menu but seems to work fine.
Thanks for the quick help!

@tron-git

This comment has been minimized.

Copy link

@tron-git tron-git commented Aug 12, 2019

Meant to say I used javascript last time

@monkeywhovapes

This comment has been minimized.

Copy link

@monkeywhovapes monkeywhovapes commented Aug 29, 2019

@tron-git , @govusfi , @IanJSaul , see the following screenshot for solution on how to close popup window when clicking the button:
image

@giuliagasp

This comment has been minimized.

Copy link

@giuliagasp giuliagasp commented Sep 20, 2019

Hi, how can I set "don't show again" option to my custom html button?

@mtdn-tech

This comment has been minimized.

Copy link

@mtdn-tech mtdn-tech commented Sep 20, 2019

@monkeywhovapes

My button options don't have the spanner icon to select the close popup option. I suspect this is to do with the JS code and CS class requirements. However being new I don't understand how this works in wordpress or Elementor Pro.

Can anyone explain, or point me to a good for the ill informed tutorial ?

Thanks

Matthew

@garciacrew

This comment has been minimized.

Copy link

@garciacrew garciacrew commented Nov 1, 2019

@JoeDarko

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

For now, you can set the link to the anchor and close the popup via custom JS code, ex, give your button CSS class of 'close-popup' and you can catch the click event to close the popup:

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

Thanks for the feedback.

This is not working for me for some reason.

@NickCa12

This comment has been minimized.

Copy link

@NickCa12 NickCa12 commented Nov 26, 2019

@tron-git , @govusfi , @IanJSaul , see the following screenshot for solution on how to close popup window when clicking the button:
image

You have to choose popup from 'dynamic' option first.

@AlexVene

This comment has been minimized.

Copy link

@AlexVene AlexVene commented Nov 29, 2019

@tron-git , @govusfi , @IanJSaul , see the following screenshot for solution on how to close popup window when clicking the button:
image

Yes, this does close the initial button for the popup, or for that matter results in the popup not opening ;) I thought the reason for this thread was instead that by clicking on a menu item in a popup that has an achor on the current page, the popup shall close.

This indeed should be a basic feature and I am kind of disappointed that this still is not an implemented feature. I tried the script above with 'click' and 'mouse-down'. But it did not work for me.

Using popups for menu is a basic idea and one pager websites are very common.

@shilo-ey what's the status for this?
Any other idea for a workaround?

@alexplayer

This comment has been minimized.

Copy link

@alexplayer alexplayer commented Dec 10, 2019

Also need this feature - shocked it was not included. Please add.

@EnglishNinja

This comment has been minimized.

Copy link

@EnglishNinja EnglishNinja commented Dec 14, 2019

Hi there, I had the same issue. For a workaround I set the popup to automatically close after a certain amount of time.

Screenshot 2019-12-14 at 23 26 11

@Fubart

This comment has been minimized.

Copy link

@Fubart Fubart commented Dec 29, 2019

+1!!!

@maryeller

This comment has been minimized.

Copy link

@maryeller maryeller commented Jan 14, 2020

I am facing the same "issue" when trying to create a mobile menu with the Popup but indeed, for anchors, the page scrolls but popup doesn't close.

I saw another code we can add using a HTML widget on the popup editor itself (no class/ID needed):

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

(credits to a Michael TH 🙃)

It worked for me, hope it works for anybody else until this option is integrated.

Cheers!

@black-eye

This comment has been minimized.

Copy link

@black-eye black-eye commented Jan 14, 2020

+1

@amillionbazillion

This comment has been minimized.

Copy link

@amillionbazillion amillionbazillion commented Jan 15, 2020

Amazing.... Thanks @maryeller

@Mikk123

This comment has been minimized.

Copy link

@Mikk123 Mikk123 commented Jan 19, 2020

I am facing the same "issue" when trying to create a mobile menu with the Popup but indeed, for anchors, the page scrolls but popup doesn't close.

I saw another code we can add using a HTML widget on the popup editor itself (no class/ID needed):

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

(credits to a Michael TH 🙃)

It worked for me, hope it works for anybody else until this option is integrated.

Cheers!

Where do I insert the code?
I tried to insert an HTML widget into the popup, but I can't save it with the code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.