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 autopositioning 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.

dhxPopup.show("popup_container");

This is how you can hide a popup:

dhxPopup.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.

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

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.

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

Attaching DHTMLX components

dhtmlxPopup 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
dhxPopup.attach("slider",{
    min: 0,
    max: 100,
    step: 1
}); 
 
dhxPopup.show();
Back to top