How do I close a ui panel when a tap occurs outside of the panel area?

Question

I've checked the "MaskableGraphic" input callbacks, nothing is being triggered. I'd like to have a panel be closed when the user taps/clicks outside of the panel area.

I understand that a "ui panel" is not a "real" object in 4.6, but the idea is that I have a window type that is compromised of images/game objects/etc.

Answer 1

Answer by jeThomas · Oct 26, 2014 at 05:07 AM

Alright, I've come up with a solution for you :)

Been messing with the UI Panels. Alright, within your UI Panel, what you want to do, is click Add Component>Event Trigger. Add a Deselect Method. While in Deselect>All>UI Panel Game Object (whatever you have named your Panel), from the drop down menu click GameObject>Set Active(bool)>Toggle Box Deselected. (Okay, first have to click the panel itself before you click outside the panel for it to deactivate itself. Hope this works for you mann.

Add comment · Show 3 · Share

omaglana · Sep 24, 2018 at 01:17 PM 0

Share

Broh, you are one freaking wizerd. Rather than doing calculations which costs memory and so.

UnityIco · Sep 09, 2019 at 03:13 PM 0

Share

And on top of it, if you want the panel to be selected when it is enabled ( so you dont have to click on the panel to select it) you can use this short sample :

 public class UIElementSelected : $$anonymous$$onoBehaviour
 {
     EventSystem eventSystem;
 
     private void Awake()
     {
         eventSystem = FindObjectOfType<EventSystem>();
     }
 
     private void OnEnable()
     {
         eventSystem.SetSelectedGameObject(this.gameObject);
     }
 }

But this will not allow buttons to be clicked on the panel. So I found a forum with a more suitable answer for me : https://forum.unity.com/threads/ui-detect-a-click-anywhere-except-on-the-ui.516546/

daveinpublic UnityIco · Jan 10 at 09:01 PM 0

Share

Actually this works.... just change one thing to get the buttons working.

When you click a button on the panel, Unity thinks you're deselecting that panel and turns it off. But Unity also knows you're clicking the button. Why doesn't it call the button? Because it's turned off the panel before your button code has run.

Instead of having the panel's Unity Event set the GameObject active to false, have it run a function that turns off the panel the next frame. Here's an example of the function you can call:

 public void turnOffPanel(GameObject thisObj)
     {
         StartCoroutine(turnOffPanel_$$anonymous$$ethod(thisObj));
     }
     IEnumerator turnOffPanel_$$anonymous$$ethod(GameObject thisObj)
     {
         yield return new WaitForSeconds(.01f);
         thisObj.SetActive(false);
     }

And then, drag any panel to turn off in the Event Trigger area, on the function you just added.

Answer 2

Answer by judy3turn · Jan 13, 2015 at 10:13 PM

Why not just disable the panel as a game object - that is how I've been managing them and it works great so far. I was here looking for an answer to another question but thought I'd mention this is working for me.

Add comment · Share

Answer 3

Answer by hiyuch · Sep 03, 2015 at 02:50 PM

Here is my panel script:

public class PanelMaskScript : MonoBehaviour ,IPointerDownHandler {
public void OnPointerDown(PointerEventData eventData) { this.gameObject.SetActive(false);
}

}

Add comment · Share

Answer 4

I found this page and read through the all the answers, and will condense the answer here.

Solution:

Turn off a panel when clicking away from it

(This works with panels that have clickable buttons on it. If you have no buttons within the panel, you can do this a simpler way.)

1 On the panel that needs to turn off when you tap away from it, add a component called 'Event Trigger'. Choose 'Add New Event Type'. Choose 'Deselect.' This tell Unity to run a function if you click outside of the element. Next, we make the function that will run.

2 The function to turn off the panel will run in the next frame. You don't want it to turn off the panel during this frame, because the clickable buttons within the panel won't run if it's already off. Example function:

 public void turnOffNextFrame(GameObject thisObj)
     {
         StartCoroutine(turnOffNextFrame_Method(thisObj));
     }
     IEnumerator turnOffNextFrame_Method(GameObject thisObj)
     {
         yield return new WaitForSeconds(.01f);
         thisObj.SetActive(false);
     }

This function needs to be chosen on the 'Event Trigger' under 'Deselect'. Then, you can drag the panel to turn off onto the opening that you get in the 'Deselect' area.

3 In order for Unity Events to consider the panel 'Deselected' when you click away from it, it has to be considered selected first. And the end user may never click on the panel before clicking away. So, you can automatically select the panel when it becomes active with this script:

 public class UIElementSelected : $$anonymous$$onoBehaviour
  {
      EventSystem eventSystem;
  
      private void Awake()
      {
          eventSystem = FindObjectOfType<EventSystem>();
      }
  
      private void OnEnable()
      {
          eventSystem.SetSelectedGameObject(this.gameObject);
      }
  }

Place this script on the panel that will be turned off.

How do I close a ui panel when a tap occurs outside of the panel area?

4 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions