Window UI widget

JavaScript Window widget helps you emphasize important information. It has practically the same behaviour as its desktop analog, making the interaction with end users very easy.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

Being a descendant of a familiar desktop window, Webix Window possesses its typical features. You can make your app more compact with this widget, since you can move some information into a window and show it when required.

Window size and position

By default, the Window widget will be the same height as the view it contains. If there's no view defined, the window will be minimized. You can also set the required initial height and width of a window manually.

To set the window position, you can specify its offset in pixels relative to the top and left borders of the screen. Relative positioning allows placing the window at the center or the top of the screen. When the 'top' positioning is selected, the window appears and disappears with slide animation.

Window resize

You can enable the resizing feature. After that, a resizer icon will appear in the right bottom corner of the window, and users will be able to resize the window by dragging it.

Head and body

The Window widget consists of two parts: a head and a body. The head can contain plain text that explains the purpose of the window. As an alternative, you can use a toolbar with controls for the head. The body can contain any Webix widget.