Popup

Popup is a component that represents a standard pop-up. Ui-related popup inherits from view.


Full code of the popup in the picture

Initialization

To init the component you need to perform a simple procedure - call initialization code.

Initialization code or an object constructor, lets you create an object by using common declaration.

dhx.ui ({view:"popup", 
...})

Parameters

In constructor you can specify the following parameters:

  • body - specifies content of the popup window.
    Here you can place all you want: nest another element, specify an HTML template, string and etc.
  • position - (top or center) sets the vertical position of popup (the horizontal position is the center of the screen).
    If you set position and left or top at the same time - left and top parameters will be ignored.
  • top - (integer) sets the top offset.
  • left - (integer) sets the left offset.
  • move - (boolean) specifies whether a popup can be moved. The default value is false.

Please note, Popup is a derived class, i.e. it inherits all the features of the base class (popup → view).

dhx.ui({
	   id:"yellow",
           view:"popup",
	   body:{ template:"<div style='width:100%; height:100%; background-color:yellow;'>I'm a popup</div>" },
	   left:500
})

Useful Tips

There are 2 main (+ 1 additional) ways to set popup position on the screen:

  1. The parameter position
  2. The parameters left and top
  3. The button's parameter popup (additional. Can be used just when you attach popup to the button)

Related how-tos