DHTMLX Docs & Samples Explorer

Operations with dhtmlxPopup

Managing dhtmlxPopup visibility

To manage dhtmlxPopup visibility you have 3 methods:

  • show() - shows a dhtmlxPopup object
    • show(id) - when the pop-up window attached to a form or toolbar, shows the pop-up window near the item with the specified ID (for radio buttons you should specify [id,value])
    • show(left, top, width, height) - shows the pop-up window near the specified area
  • hide() - hides a dhtmlxPopup object
  • isVisible() - checks whether the pop-up window is currently hidden or shown. Returns true if the pop-up is visible

Let's consider as an example of usage these methods - attaching dhtmlxPopup to a custom object when you need to manually regulate showing/hiding of the pop-up window:

<input type="text" onclick="showPopup(this);" onblur="hidePopup();" value="click">
function showPopup(inp) {
	if (!myPop) {
		myPop = new dhtmlXPopup();
		myPop.attachHTML("You can enter some text into here");
	if (myPop.isVisible()) {
	} else {
		var x = getAbsoluteLeft(inp); // inner dhtmlx method, return left position
		var y = getAbsoluteTop(inp); // inner dhtmlx method, return top position
		var w = inp.offsetWidth;
		var h = inp.offsetHeight;
function hidePopup() {
	if (myPop) myPop.hide();

Setting the skin

The library provides 3 predefined skins:

'dhx_skyblue' 'dhx_web' 'dhx_terrace'

To set the skin for a dhtmlxPopup object you should use the setSkin method.

var myPop = new dhtmlXPopup( ... );

The following order is used to determine the skin on load:

  1. the skin parameter of the dhtmxlPopup object constructor
  2. the dhtmlx.skin property
  3. the form/toolbar skin (if the pop-up window is attached to a form or toolbar)
  4. dhtmlxPopup tries to detect the skin automatically (each skin css file has a corresponding record to help to detect the skin)
  5. the default “dhx_skyblue” skin is used

For example, if you include on the page the only css file - “dhxpopup_dhx_terrace” - and instantiate dhtmlxPopup without specifying the skin parameter, then the “dhx_terrace” skin will be detected automatically.

Clearing the content

To clear the current content of a pop-up window, you should call the clear() method as in:

var myPop = new dhtmlXPopup( ... );

If you decide to attach some content over the existing one, note that before attaching the new content dhtmlxPopup will call the clear() method automatically.