In the UI system, we often need to pop up some components, and these components will automatically disappear when the user clicks on a blank space. FairyGUI has this feature built in.

The API to pop and close Popup is provided in GRoot.

The pop-up box will automatically close when you click on the blank space. If you want to be notified of this shutdown, you can listen to the event of moving out of the stage, for example:

aComponent.addEventListener(Event.REMOVED_FROM_STAGE, onPopupClosed);
aComponent.addEventListener(egret.Event.REMOVED_FROM_STAGE, this.onPopupClosed, this);
aComponent.on(laya.events.Event.UNDISPLAY, this, this.onPopupClosed);
aComponent->addEventListener(UIEventType::Exit, CC_CALLBACK_1(AClass::onPopupClosed, this));
aComponent.on(fgui.Event.UNDISPLAY, this.onPopupClosed, this);


PopupMenu is a tool class provided by FairyGUI for implementing popup menus. First you need to make a menu component in the editor, click “Resources-> New Popup Menu …”, and then follow the wizard to complete. The key element in the menu component is namedlistFor the list component, the overflow processing mode of the list should be selected as visible, because in general, the menu displays all items without scrolling.

After making the menu component, this menu can be generated and called in the code.

First set the global menu resources:

UIConfig.popupMenu = "ui://package name/menu component name";
    // if there is a design divider
    UIConfig.popupMenu_seperator = "ui://package name/menu separator";

// If the constructor takes no parameters, it means using the resources defined in UIConfig.popupMenu.
    / / Can also take a parameter, specify the menu component resources used by this menu
    PopupMenu menu = new PopupMenu ();
    // If you want to modify the width of the menu.
    menu.contentPane.width = 300;
    // Add a menu item and register the click callback function
    GButton item = menu.AddItem ("Title", MenuItemCallback);
    item.name = "item1";
    // click callback function, context.data is the item that is currently clicked
    void MenuItemCallback (EventContext context)
        GButton item = (GButton) context.data);
        Debug.Log (item.name);
    // CocosCreator version callback function, the first parameter is the clicked item
    MenuItemCallback (item, evt) {
    // Add divider
    menu.AddSeperator ();
    // Setting menu items are grayed out
    menu.SetItemGrayed ("item1", true);