Enable or disable a UI. Help

FiveM Resource Development Discussion
1

How can I enable or disable a UI?
I thought about removing the main container using javascript but it doesn’t seem good to do that xD

2

Hey there!

Based on your question, I’ll assume you’re asking about using NUI (NUI stands for ‘new UI’) in FiveM, You’re on the right track thinking about using JavaScript to enable or disable your UI. Instead of removing the main container, you can simply toggle its visibility using CSS and JavaScript. This approach is cleaner and more efficient. Here’s a simple example how you can do this in FiveM.

client.lua

local showui = false
RegisterCommand("toggleui", function()
    showui = not showui 
    SendNUIMessage({
        type = "ui",
        display = showui 
    })
end, false)

ui.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FiveM UI</title>
    <style>
        #myUI {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="myUI">
        <h1>NUI on CEF!</h1>
    </div>
    <script>
        window.addEventListener('message', (event) => {
            const data = event.data;
            if (data.type === 'ui') {
                document.getElementById('myUI').style.display = data.display ? 'block' : 'none';
            }
        });
    </script>
</body>
</html>

TL;DR: This example and answer are based on the assumption that you are asking about NUI and using Lua.

for more information please read documentation at
https://docs.fivem.net/docs/scripting-manual/nui-development/full-screen-nui/
https://docs.fivem.net/docs/scripting-manual/nui-development/nui-callbacks/

1 Like