Skip to main content

Work with Popup

Hiding/showing Popup​

You can hide and show a popup using the hide() and show() methods. The show() method takes the following parameters:

element(HTMLElement) mandatory, the container to place a popup in
config(object) optional, the configuration object of a popup. Can contain the properties below:
  • centering - (boolean) defines whether a popup should be centered relative to the element, true by default
  • auto - (boolean) enables auto-positioning of a popup, i.e. it will be shown at that side of an element which provides enough space for a popup
  • mode - (string) the position relative to the element to show a popup at:"left","right","bottom" (default),"top"
  • indent - (number) the offset of a popup relative to the element

This method should be called each time you need to render a popup on a page.

popup.show("popup_container");

This is how you can hide a popup:

popup.hide();

Related sample: Popup. Show/Hide

Checking visibility of Popup​

You can easily check whether a popup is visible with the help of the isVisible() method. It returns true, if a popup is visible.

popup.isVisible(); // -> true/false

Related sample: Popup. Is visible

Attaching content​

You can easily attach some HTML content to a popup via the attachHTML() method. It takes as a parameter a string with HTML.

const popup = new dhx.Popup();
popup.attachHTML("<h1>Hello, I'm popup</h1>");
popup.show("popup");

Related sample: Popup. HTML content

Attaching DHTMLX components​

DHTMLX Popup allows attaching other components of the library using the attach() method. It takes two parameters:

name(string) the name of a component
config(object) optional, the configuration settings of a component

popup.attach("Timepicker"); 

popup.show();

Related sample: Popup. Attach Timepicker