Click outside of Gui element

Help and Feedback Scripting Support
#1

Hi, I have a gui where when you select an item another, smaller, ui pops up on top of it.

example

What I want to happen is when you click outside of the popup ui, it will dissapear.

I have tried using the gameProcessedEvent boolean from UserInputService.InputBegan but that only detects if the user is clicking on top of a gui or not.

Does anyone have any ideas how I can achieve this?

2 Likes
Closing GUI When Pressing Outside of Frame
#2

Greetings! :smile:

You can do an easier approach, and make a button under the pop-up UI using the zindex property and make it so once It’s clicked the pop-up UI disappears.

#3

The easiest solution to this would be to create a semi-transparent button (filling up the whole screen) behind this popup, and when clicked, remove the popup. The slightly more complex solution would be to connect to UserInputService.InputBegan, check for MouseButton1, and use some math to determine if the position of the mouse is outside the bounds of the popup- e.g. check if the mouse position (x and y) is smaller than the position or greater than the position + the size.

1 Like
#4

Listen for a mouse click event (UserInputService or PlayerMouse) and use GetGuiObjectsAtPosition to make sure the mouse isn’t intersecting any of the popup’s elements.

#5

I have tried this but clicks above the gui still register which means if you are on mobile you are unable to scroll.

#6

After experimenting a bit I managed to find my own solution. What I did was have a boolean value which was set to true when the mouse enters the popup and is set to false when it leaves. I then used UserInputService.InputBegan to detect when the mouse is clicked. If the event occurs when the boolean is set to false then it will close the gui. Here is my code for anyone interested:

local InSelection = false

ui.MouseEnter:Connect(function() InSelection = true end)
ui.MouseLeave:Connect(function() InSelection = false end)

uis.InputBegan:Connect(function(input)
	if script.Parent.Frame.ItemSelected.Visible and not InSelection and input.UserInputType == 
    Enum.UserInputType.MouseButton1 then
		print("Unselect")
		ItemUnselected()
	end
end)
15 Likes