# Close popup when click button

**URL:** <https://community.elfsight.com/t/close-popup-when-click-button/49829>\
**Category:** General Questions\
**Tags:** popup\
**Created:** [April 27, 2024, 10:30am UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829 "2024-04-27T10:30:13Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Giorgos](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/giorgos/32/3381_2.png) [@Giorgos](https://community.elfsight.com/u/Giorgos)\
**Post date:** [April 27, 2024, 10:30am UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/1 "2024-04-27T10:30:13Z")

</div>

Is it possible to auto close the popup when you click the button that you have add on the blocks?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 27, 2024, 11:37am UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/3 "2024-04-27T11:37:32Z")

</div>

Hi @Giorgos 👋

Could you please send me a direct link to the page where your widget is installed? I’ll be happy to look into this for you 🙂

---

<div class="post-metadata">

**Author:** ![Giorgos](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/giorgos/32/3381_2.png) [@Giorgos](https://community.elfsight.com/u/Giorgos)\
**Post date:** [April 27, 2024, 12:48pm UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/4 "2024-04-27T12:48:07Z")

</div>

Hi @Max you can check here [popup](https://test-9759f4.webflow.io/) There are 2 sections A & B. The popup button “GO TO B” have an anchor for section B. When you click the button, the page goes to section B but the popup still remains visible. Is it possible when you click the button and move to section B, the popup to close automatically?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 27, 2024, 12:52pm UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/5 "2024-04-27T12:52:46Z")

</div>

Got you!

I’ll discuss it with devs and get back to you a bit later 🙂

---

<div class="post-metadata">

**Author:** ![Giorgos](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/giorgos/32/3381_2.png) [@Giorgos](https://community.elfsight.com/u/Giorgos)\
**Post date:** [May 13, 2024, 3:33pm UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/6 "2024-05-13T15:33:21Z")

</div>

Hi @Max is there any update?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 13, 2024, 3:49pm UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/7 "2024-05-13T15:49:49Z")

</div>

@Giorgos Please accept my deepest apologies for the delayed reply!

We’ve added this code to the Custom JS field on the Settings tab of your widget’s settings:

```auto
const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);
    if (component) {
      res(component);
    } else if (i !== 50) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

waitForElement(".eapps-popup-2f0ef511-0ee1-4b3a-8cd4-6b05f8eff1ba-custom-css-root [class*='Popup__PopupContainer-sc']").then(popup => {
  const [closeBtn, btn] = popup.querySelectorAll("button");
  btn.addEventListener("click", () => closeBtn.click());
});

```

  

Please check it out and let me know if it worked 🙂

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [November 30, 2024, 11:42pm UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/8 "2024-11-30T23:42:44Z")

</div>

Hi @Max @Helga  
what kind of ID is that?  
The Widget ID from Popup or something?

what do I plan to do?  
Multistep in a Popup ist not possible, what do I plan to do?  
A Button in a Popup open another popup. That works, but the first popup must also close on this click.  
I think this JS Code is a solution.

> [@Max](#):
>
> `waitForElement(".eapps-popup-2f0ef511-0ee1-4b3a-8cd4-6b05f8eff1ba`

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 2, 2024, 10:48am UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/9 "2024-12-02T10:48:30Z")

</div>

@Sina Giorgos had a button on his website redirecting to another section of the same page on click. And this code helps to automatically close the popup when redirecting to another section.

I’d be happy to find a solution for your specific case as well. Could you just share a link to page with your widget and describe what you’d like to achieve?

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [December 2, 2024, 1:29pm UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/10 "2024-12-02T13:29:55Z")

</div>

@Max

with this Solution I can open the first popup - works

[HTML Element ID for Button to open a Popup on click](https://community.elfsight.com/t/html-element-id-for-button-to-open-a-popup-on-click/86092/2)

Now I want to open another popup with this popup with another button - it also works.

If the second popup is open, then the first one is still open in the background. It’s about closing this at the same time.

With this I created a multistep popup.

Unfortunately that doesn’t work.

[1. Popup](https://dash.elfsight.com/widget/b96f29b9-2238-474c-b2c3-4eccbf1836a0)

[The Button in the first Popup which opens the 2nd popup and should now close the 1st popup](https://dash.elfsight.com/widget/1706269c-2252-4e19-b5f4-1076073d4912)

[2. Popup](https://dash.elfsight.com/widget/dc757eb1-cf80-4f5e-abc7-d495c521d971)

I haven’t created the button that opens the first popup yet.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 2, 2024, 5:28pm UTC](https://community.elfsight.com/t/close-popup-when-click-button/49829/11 "2024-12-02T17:28:16Z")

</div>

Sorry for being not clear enough! Could you please send me a direct link to the page where these Popup widgets are installed?