Skip to content

Other panel-specific methods

In case you haven't used them before in other contexts, a modal window is a secondary window that appears on top of the main content, requiring user interaction before they can return to the parent application, effectively blocking interaction with the underlying content. These are normally used for things like confirmation dialogs ("Are you sure?"), requesting user input before doing something, or displaying an alert or error message.

You can define a panel as modal by using setModal. You can also change the modal overlay color and alpha with the appropriate methods.

For example, the following code creates two regular panels. Then, it creates a third one, and sets the visibility to false. Also, we add a close button sprite, so we have a way to quickly destroy the panel, and add a title while we're there. Let's add a button on the FirstPanel panel, and add a callback so it creates and shows the modal panel, when clicked:

 6
 7
 8
 9
10
11
12
13
14
15
    var _panel = new UIPanel("FirstPanel", 0, 0, 400, 300, blue_panel, UI_RELATIVE_TO.MIDDLE_CENTER);
    var _panel2 = new UIPanel("SecondPanel", 100, 100, 300, 200, green_panel);

    var _button = new UIButton("Button", 0, 0, 200, 100, "Show Modal", blue_button00, UI_RELATIVE_TO.MIDDLE_CENTER);
    _button.setCallback(UI_EVENT.LEFT_RELEASE, function() {
        var _panel3 = new UIPanel("ModalPanel", 0, 0, 300, 200, grey_panel, UI_RELATIVE_TO.MIDDLE_CENTER);
        _panel3.setCloseButtonSprite(red_cross).setTitle("[c_black]Modal panel - close to return"); 
        _panel3.setVisible(true).setModal(true);
    });
    _panel.add(_button);

If we take a look at the interactive example, we can see that, when we click on the button, the panel opens. We see that a colored overlay is drawn over all other panels, and they are effectively set to disabled - this means we can no longer interact with them. Once we click the red cross to destroy the modal panel, it returns to the way it was before:

By using this you can set up modal panels.

Modal panels

You can only define one modal panel at a time.