Object Constructor

Attaching to a Form's Control

var myForm = new dhtmlXForm("myForm", [
    {type: "input",    name: "name",    value: "Ogiwara Masaaki", label: "Full Name"},
    {type: "password", name: "pwd",     value: "12345",           label: "Password"},
    {type: "button",   name: "proceed", value: "Proceed"}
]);
var myPop = new dhtmlXPopup({ 
    form: myForm, 
    id: ["name","pwd"] //attaches the same pop-up window to 2 inputs: "Full Name" and "Password"
});

Related sample: Attach to form

Available parameters

Parameter	Description	Optionality
form	(string, object) the id or object of the dhtmlxForm instance that the pop-up window will be attached to	Mandatory
id	(string, array) the id of a form's control that you want to attach a pop-up to or an array of ids if you'd like to attach the same pop-up to several controls. For radio buttons you need to specify the value as an array (i.e. id: ["inp1", "inp2", ["r1","v1"] ], where ["r1","v1"] is the name and value of a radio button)	Mandatory
mode	("top", "bottom", "right", "left") the position that the pop-up window will appear at. By default for form-based init, "right". If available space is less than required, dhtmlxPopup automatically changes the mode from "top" to "bottom", from "left" to "right" and vice versa	Optional
skin	(string) the skin to apply. Read more on skins here.	Optional

Attaching to a Toolbar's Control

var myToolbar = new dhtmlXToolbarObject("toolbarObj");
myToolbar.addButton("button_open", 2, "Open", "open.gif", "open_dis.gif");
myToolbar.addButton("button_save", 3, "Save", "save.gif", "save_dis.gif");
 
var myPop = new dhtmlXPopup({ 
    toolbar: myToolbar,
    id: "button_open" //attaches a pop-up window to the "Open" button
});

Related sample: Attach to toolbar

Available parameters

Parameter	Description	Optionality
toolbar	(string, object) the id or object of the dhtmlxToolbar instance that the pop-up window will be attached to	Mandatory
id	(string, array) the id of a toolbar's control that you want to attach a pop-up to or an array of ids if you'd like to attach the same pop-up to several controls.	Mandatory
mode	("top", "bottom", "right", "left") the position that the pop-up window will appear at. By default, "bottom". If available space is less than required, dhtmlxPopup automatically changes the mode from "top" to "bottom", from "left" to "right" and vice versa	Optional
skin	(string) the skin to apply. Read more on skins here.	Optional

Attaching to an HTML Element

<input type="text" onclick="showPopup(this);" onblur="hidePopup();" value="click">
 
<script>
    var myPop = new dhtmlXPopup();
    myPop.attachHTML("You can enter some text into here");
 
    function showPopup(inp) {
        myPop.show(20,20,400,300); //params are: x, y, width, height
    }
    function hidePopup() {
        myPop.hide();
    }
</script>

Related sample: Attach to custom object

Available parameters

Parameter	Description	Optionality
mode	("top", "bottom", "right", "left") the position that the pop-up window will appear at. By default, "bottom". If available space is less than required, dhtmlxPopup automatically changes the mode from "top" to "bottom", from "left" to "right" and vice versa	Optional
skin	(string) the skin to apply. Read more on skins here.	Optional

Destructor

To remove a dhtmlxPopup instance and clear the memory, use the unload method:

myPop.unload();
myPop = null;

Related sample: Skins

Once you reload the page, the dhtmlxPopup's instances are destroyed automatically.