Unity-UI 按钮点击弹窗功能

一、最终实现效果

运行游戏，点击【打开弹窗】按钮，中间弹出弹窗面板；点击弹窗内【关闭】按钮，弹窗隐藏。编辑器 Scene 视图可编辑，Game 窗口交互正常，打包 EXE 无失效问题。

标注：Game 窗口左侧按钮，屏幕中间弹出半透明背景弹窗，包含标题文字 + 关闭按钮

二、层级结构搭建（Hierarchy 层级）

复制代码

Canvas
├─ OpenBtn （打开弹窗按钮）
└─ PopWindow（弹窗总面板，默认取消激活）
   ├─ Background（半透明黑色遮罩Image）
   ├─ Panel（弹窗白色底板Image）
   │  ├─ TitleText（标题文本）
   │  └─ CloseBtn（关闭按钮）

标注：PopWindow 物体取消勾选激活（默认隐藏），所有 UI 均在 UI 图层，Canvas 渲染模式 Screen Space-Overlay

2.1 Canvas 基础设置

右键创建 → UI → Canvas，自动附带 EventSystem；
Canvas 组件参数：
- Render Mode：Screen Space - Overlay
- Canvas Scaler：Scale With Screen Size，参考分辨率 1920×1080
Graphic Raycaster 保持默认勾选（必须，否则按钮无法点击）

2.2 弹窗面板制作步骤

右键 Canvas → UI → Image，命名PopWindow，取消 Inspector 左上角 Active 勾选（初始隐藏）；
在 PopWindow 下新建 Image 命名 Background：
- RectTransform 锚点拉伸全屏，颜色黑色，透明度 Alpha=80（遮罩层，点击空白也可关闭可选）；
Background 下新建 Image 命名 Panel：居中放置，白色底色，调整宽高作为弹窗主体；
Panel 内添加 Text（标题）、Button（关闭按钮）；
外层创建 OpenBtn 按钮，放在屏幕左下角 / 左上角作为触发按钮。

三、C# 逻辑脚本编写（弹窗管理脚本）

3.1 创建脚本 `PopWindowManager.cs`

挂载到 Canvas 空物体上，拖拽赋值对应 UI 对象。

cs 复制代码

using UnityEngine;
using UnityEngine.UI;

public class PopWindowManager : MonoBehaviour
{
    [Header("弹窗总面板")]
    public GameObject popWindowObj;

    void Start()
    {
        // 启动再次确保弹窗隐藏，防止编辑器误开启
        popWindowObj.SetActive(false);
    }

    /// <summary>
    /// 打开弹窗 绑定给【打开按钮】OnClick事件
    /// </summary>
    public void OpenPopWindow()
    {
        popWindowObj.SetActive(true);
    }

    /// <summary>
    /// 关闭弹窗 绑定给【关闭按钮】OnClick事件
    /// </summary>
    public void ClosePopWindow()
    {
        popWindowObj.SetActive(false);
    }

    // 拓展：点击遮罩背景关闭弹窗（可选）
    public void CloseByMask()
    {
        ClosePopWindow();
    }
}

标注：脚本挂在 Canvas，PopWindowObj 拖拽层级里的 PopWindow 物体

四、按钮绑定 OnClick 点击事件（核心步骤）

4.1 绑定【打开弹窗】按钮

选中层级 OpenBtn 按钮；
在 Button 组件下方找到 On Click () ，点击+号添加事件；
拖拽挂载了PopWindowManager脚本的 Canvas 物体到对象框；
函数选择：PopWindowManager -> OpenPopWindow()。

标注：拖拽脚本载体、选中对应打开方法

4.2 绑定【关闭】按钮

选中弹窗内CloseBtn；
同样添加 OnClick 事件，绑定同一脚本的ClosePopWindow()方法。

4.3 点击黑色遮罩关闭弹窗

选中 Background 遮罩 Image，添加 Button 组件，绑定CloseByMask()方法即可。

五、常见踩坑问题解决

问题 1：Scene 视图看不到 UI，Game 正常

右上角 Layers 面板点亮 UI 图层眼睛；
Scene 视图开启 2D 模式；
Overlay 模式 Scene 只显示边框，改为 Screen Space-Camera 可完整预览。

问题 2：按钮点击无任何反应

检查是否存在EventSystem物体，删除会导致所有 UI 失效；
Canvas 必须带 Graphic Raycaster 组件；
UI 物体不能被其他全屏 Image 完全遮挡；
图层 Culling Mask 相机勾选 UI 层。

问题 3：弹窗弹出位置偏移

锚点设置为居中对齐，RectTransform 重置，使用 Canvas Scaler 屏幕适配。