Work with Popup

Show and hide Popup

Use the show() and hide() methods to show and hide a popup. 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. It can contain the following properties: centering - (boolean) defines whether a popup is centered relative to the element (default: true) auto - (boolean) enables auto-positioning of a popup, that is, the popup appears on the side of the element that has enough space for it mode - (string) the position of a popup relative to the element: "left", "right", "bottom" (default), "top" indent - (number) the offset of a popup relative to the element

Call the show() method each time you need to render a popup on a page:

popup.show("popup_container");

To hide a popup, call the hide() method:

popup.hide();

Related sample: Popup. Show/Hide

Check Popup visibility

The isVisible() method checks whether a popup is visible. It returns true if the popup is visible and false otherwise.

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

Related sample: Popup. Is visible

Attach HTML content

Use the attachHTML() method to attach HTML content to a popup. The method takes a string with HTML as a parameter.

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

Related sample: Popup. HTML content

Attach DHTMLX components

Use the attach() method to attach other DHTMLX components to a popup. The method 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