Is there a way to close a pop up from an action of a user defined button?

[marcuscps]

TLDF: Is there an action to close the currently active pop-up? (just like the X button on the top, but from a user defined button inside the pop-up.

Context:
I have a button in my dashboard to open a skylight for 30 minutes.
If I long press it, it open a pop-up that allows opening if for a longer/shorter time:

I'd like to close the pop-up whenever one of the buttons are clicked, but couldn't find a way to do so.
Is it something supported?

I have a hacky solution for invoking multiple actions from a single tap_action. This way I can invoke the script to open the skylight. A second action would be closing the pop-up, I just don't know how to do it.

Thanks a lot.

[MrBearPresident]

Add this to every buttons custom style:

.bubble-action{
  cursor: pointer !important;
}
  
${(() => { 
 if(!card.extraListenerAdded){
   card.querySelector('.bubble-action').addEventListener('click', () => {
      if (!location.hash) return;
      setTimeout(() => {
          const newURL = window.location.href.split('#')[0];
          history.replaceState(null, "", newURL);
          window.dispatchEvent(new Event('location-changed'));
      }, 50);
    })
    card.extraListenerAdded = true;
  }
})()}  

---

^{If this solves your problem, mark this as the answer and close the discussion.}

[henriknordgren]

@MrBearPresident Thanks, I was looking for exactly this. I do have one issue, the above code works great if I click somewhere in the button container, but not on the actual icon:

           - type: custom:bubble-card
                      card_type: button
                      card_layout: large
                      button_type: name
                      show_icon: true
                      show_name: false
                      entity: switch.baksida_email_on_event
                      icon: mdi:abacus                       
                      tap_action: 
                        action: none
                      styles: |
                        .bubble-action{
                            cursor: pointer !important;
                          }   
                        .bubble-button-card-container {
                          background: none;
                          width: 148px!important;
                          height: 48px!important;
                          padding: 0px!important;
                          border-radius: 0px!important;
                        }          
                        
                         ${(() => { 
                           if(!card.extraListenerAdded){
                             card.querySelector('.bubble-action').addEventListener('click', () => {
                                if (!location.hash) return;
                                setTimeout(() => {
                                    const newURL = window.location.href.split('#')[0];
                                    history.replaceState(null, "", newURL);
                                    window.dispatchEvent(new Event('location-changed'));
                                }, 50);
                              })
                              card.extraListenerAdded = true;
                            }
                          })()}  

When I click on the actual button it just wants to run the tap_action instead. If I click outside the "button" (the icon with the round background), nothing happens. I set the width to the container to something bigger just to get aclickable area. If I set the container size to exactly that of the bubble-card, it doesnt work.

I just want the button to be a round button... not the stretched one in the OP. Is there asolution?

[MrBearPresident]

This still allows you to have the tap action.
This will execute tap action AND the closing of the pop-up.

For your specific problem. I really have no clue what you want. Mind making a screenshots + annotate the screenshot to explain what you want?

[henriknordgren]

This still allows you to have the tap action. This will execute tap action AND the closing of the pop-up.

For your specific problem. I really have no clue what you want. Mind making a screenshots + annotate the screenshot to explain what you want?

Thanks for the reply.

Well, with the above code, a tap on the icon resulted in a tap action (more info, none whatever I set in the tap_action. A click on the other part of the button made it close.

I solved it using this code:

`` - type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: true
show_name: false
icon: mdi:close
tap_action:
action: call-service
service: browser_mod.javascript
data:
code: >
const newURL = window.location.href.split('#')[0];
history.replaceState(null, "", newURL);
window.dispatchEvent(new Event('location-changed'));

So thanks for the javascript that made it work :=) Now I just have to figure out how to make the backdrop darker, and I am all set. This bubble card popup is fantastic!