NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

JavaScript Context and Popup UI widgets

Context is a widget that looks like a popup window and is hidden by default. It appears on the screen after a user makes a right click. It can contain any HTML code or a Webix component. JavaScript Popup is a widget that allows creating alerts for a user. It is similar to Webix Window by functionality, however, it disappears if you click somewhere outside of it.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

Both these widgets are pop-up windows, but they have different purposes. If you want to create an alert, you can use the Popup widget. After a user clicks somewhere outside the Popup, it will disappear.

The Context widget, in its turn, can contain info or functionality which the user may need more than once. For example, a right click can trigger a short memo that describes how your app works.

Besides, you can place a frequently used component within Context. For example, if you want to create a graphical online application, the Context window may contain a Colorpicker.

Context

The Context widget appears on the screen upon a right click. It can contain an HTML element or any Webix component. You can use it to provide users with on-demand explanatory information or give them easy access to frequently used functionality.

Right click here

Popup

Modal/Modeless state

Popup has both modal and modeless states. In the modal state a popup prevents users from working with the application until they interact with it. A Modeless popup disappears from the screen when a user clicks outside it.

Size and positioning

When you work with the Popup widget, you have to define its size and position. By default, this component will stick to the top-left corner. Webix allows you to set the width and height of the Popup and define its position relative to the top and left sides of the screen, or relative to another HTML element or Webix widget.