Popup

API Reference

Overview

Popup is a variant of a ui-related window. Unlike it, the popup disappears as you click somewhere outside it. Popup is be used to alert some info as well can form a popup menu.

Initialization

Popup consists of body (both taking either view or text template) without the head section.

The component should be made visible with the show() method you call during the component initialization (if, of course, you want the popup to appear on page loading).

webix.ui({
    view:"popup",
    id:"my_popup",
    body:{
        template:"Some text" 
    }
}).show();

Related sample:  Popup Window

Popup Sizing and Positioning

For adequate work, you need to specify the dimensions of your popup as well as its offsets (top and left). Otherwise, the component occupies the whole screen or sticks to its top left corner respectively.

webix.ui({
    view:"popup", 
    width: 400, height:300,
    top:200, left: 300
}).show();

There exist more positioning options. All of them are described in a separate documentation article.

Creating a Popup Menu

Related sample:  Popup Menu

To create a popup menu that will appear on button click, you should create a button with popup property that takes popup ID as value.

The popup is hidden initially. Toolbar and popup are initialized within different webix.ui containers.

Popup Menu

webix.ui({
       view:"toolbar", 
       elements:[
            {view:"button", label: 'Menu', popup:"my_pop"}, 
            ...
        ]
});
 
webix.ui({
       view:"popup",
       id:"my_pop",
       body:{
            view:"list", 
        ...}
}).hide();

Related sample:  Popup Menu

Related Articles

Back to top