Closing GUI When Pressing Outside of Frame

Help and Feedback Scripting Support
#1

How would I go about programming a GUI that closes when a user presses outside of the frame like in the video?

#2

You can have a frame behind that main frame that covers the whole screen with .Active enabled, then you could do something with the GuiObject | Roblox Creator Documentation event for GUI’s.

2 Likes
#3

I usually just have one universal TextButton named Exit and set a connection to close the other UIs when clicked

1 Like
#4

You could listen for the event UserInputService.InputBegan and check if the UserInputType of the Input object passed from the event is UserInputType.MouseButton1, if so, use the GetGuiObjectsAtPosition method with your Input.Position.X and Input.Position.Y values as the arguments. This will return a table of the GuiObjects that are at that position. If the table is empty, it means you can close the gui, otherwise, keep it open. There are other ways to do this as well, you could use that kind of dark background that occupies the screen when the UI is up and also check if that is what the mouse clicked on, and if so, close the gui and so forth.

#5

This has been posted here already :slight_smile:
It was solved by @CookieScript with this script:

local InSelection = false

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

uis.InputBegan:Connect(function(input)
	if PopUp.Visible and not InSelection and input.UserInputType == 
    Enum.UserInputType.MouseButton1 then
		print("Unselect")
		ItemUnselected()
	end
end)

Or you could just create a transparent text button under your pop up and wait for it to be pressed

#6

What object would I listen for UserInputService.InputBegan?

#7 
local player = game.Players.LocalPlayer
local playerGui = player.PlayerGui
game:GetService("UserInputService").InputBegan:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 then
		local mousePos = input.Position
		local objects = playerGui:GetGuiObjectsAtPosition(mousePos.X, mousePos.Y)
		
		if #objects == 0 then
			frameClose()
		end
	end
end)

It would be something like this essentially.

2 Likes
#8

Ok, so I decided to opt for the dark background method, but how do I place the background in front of every other UI (including the mobile controls) except for the main frame like in the image below?

image0
image02436×1125 1.59 MB

#9

You can modify the ZIndex property according to how you want the UIs to overlay one another. A GuiObject with a ZIndex of 2 will overlay a GuiObject with a ZIndex of 1, and so on.