• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
2
Question by djneon · Oct 26, 2014 at 02:56 AM · 4.6

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

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.

Comment
Add comment · Show 6
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image jeThomas · Oct 26, 2014 at 03:10 AM 0
Share

I think it'll have something to do with the On Click () method. I'm not too sure, but I do know that with the Buttons themselves, you can deactivate them while clicking a different button. Perhaps if you threw an [x] button in the panel (if possible). And that'll close this Panel by using the On Click () in the [x] button method by choosing the Panel GameObject, from the drop down menu choose GameObject>SetActive(bool). Then a toggle box will show up; make sure that's unchecked.

avatar image Firedan1176 · Oct 26, 2014 at 04:01 AM 1
Share

You could try making an invisible panel that covers the screen that is behind the panel you want to close. Then you can make a script that will disable that panel you want to close when you click on it.

avatar image djneon · Oct 26, 2014 at 04:09 AM 0
Share

@Firedan1176 that was one idea I had. That might even be "cleaner" than trying catch all input.

avatar image jeThomas · Oct 26, 2014 at 04:11 AM 0
Share

I actually posted this as an answer, but however it seems to be awaiting by a moderator and they take forever, so this is the actual fix you may be waiting for:

:)

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 $$anonymous$$ethod. 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.

avatar image djneon · Oct 26, 2014 at 05:00 AM 0
Share

@jeThomas that seemed really promising... I got it working once. I tried a few different game objects, and then even another scene and couldn't get it to work again. I'm sure there's something I'm missing. :/

Show more comments

4 Replies

· Add your reply
  • Sort: 
avatar image
9

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.

Comment
Add comment · Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image 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.

avatar image 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/

avatar image 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.

avatar image
0

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.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

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);
}

}

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

Answer by daveinpublic · Jan 10 at 09:28 PM

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.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

The best place to ask and answer questions about development with Unity.

To help users navigate the site we have posted a site navigation guide.

If you are a new user to Unity Answers, check out our FAQ for more information.

Make sure to check out our Knowledge Base for commonly asked Unity questions.

If you are a moderator, see our Moderator Guidelines page.

We are making improvements to UA, see the list of changes.



Follow this Question

Answers Answers and Comments

10 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

A node in a childnode? 1 Answer

Unity 4.6B UI Scrollbar Usage 1 Answer

unity 4.6 button functions? 1 Answer

Change All (new) UI Text Font? 3 Answers

Detecting a UI element is over another UI element 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges