API Reference


Window is a UI-related component that looks like a standard on-screen window. It inherits from view, but differs from other components in its character. It lies not within your app's layout but as if above other components. The same is true about popup.


    head:"My Window",
        template:"Some text"

Related sample:  Windows: Basic Initialization


  • A standard window contains the head and body sections. However, the head can be set to false if you don't need it;
  • To make the window visible, you should apply the show() method after its initialization;
  • A movable window contains the move:true property in its constructor;
  • By default windows are non-modal. When such a window is focused, it can be closed with the 'Esc' hotkey. Modality is described below.

Working with Window


The head differs from the window body in style and may contain:

  • a text header that is set as a string value of the head property;
  • a toolbar with controls. The most common are text label and the "Close" button.
    view:"button", label:"Close", width:70,
// "my_win" is your window's ID

Please note that there exist two functions to remove a window from the screen - close() and hide(). The first one completely removes the window from the app and there will be no way to show it back.

If you want to change the window's visibility rather than remove it, use hide(). Later on, it can appear on the page on calling the show() method for it.


This section may contain any view to match your needs.

Text template is set by initializing template component. It can be defined without direct initialization as {template:"some text"}.

Window with Datatable


Related sample:  Window with a Component Inside

Window Sizing and Positioning

The must-have parameters for the window are width and height. If you don't set them, the window will either be minimized or take the dimensions of the inner view (if set).

Furthermore, Webix window features various methods for setting its position. All of them are described in a separate documentation article.

Window Resizing

Window can be resized by a user in a browser with the help of a resizer icon in the right bottom corner of the window.

To enable this possibility, you need to include the resize property with the true value into the window's configuration.

Related sample:  Windows: Resize

Window Modality

Modality is a feature of the UI-widget that can affect the work of an application and control user-app interaction. Alert and Confirm message boxes are modal windows in their essence, as they prevent the workflow in the application main window.

The appearance of such a window on the page prevents users from working with the app until they perform an action required by this window (enter data, press the button, etc.).

UI-related Window is non-modal by default. Its modality is set with the help of the same-name property:

{view:"window", modal:true}

When a modal window is initialized, the app area turns gray to indicate that it is disabled, while you are "communicating" with the window.

How to use Window over IFrame content

The usage of a window together with an IFrame imposes some limitations on the app functionality. IFrame intercepts all events, so that a window initialized over an iframe can't work correctly. In order to make the window work correctly, you can use one the following workarounds:

  • either use a modal window:
  view:"window", move:true,
  position:"center", head:"Drag me",
  modal:true,    body:{
    template:"Any issues with fluency?"

Related sample:  Modal window over IFrame

  • or disable the IFrame view while the window is active:
  view:"window", id:"window",
  // full config
    {id:"frame", view:'iframe',src:'//'}
$$("frame").disable();  $$("window").show();

Related sample:  Disable IFrame

Related Articles

Back to top