Skip to main content


dhtmlxWindow provides a set of configuration options you can define in the constructor of the component before its initialization. It's possible to set a title into the header of a window, add a footer with controls, specify the sizes of a window and decide whether it should be resizable, movable or modal, set some HTML content and define other useful settings to adapt the component to your needs.


There is the closable property that adds a Close button into the right top part of a window to allow a user to close a window on clicking it. This option is set to true by default.

var dhxWindow = new dhx.Window({    closable:false});

Related sample: Window. Closable Window

Custom node#

To place a window into a custom node you need to specify the container for a window via the node property:

var dhxWindow = new dhx.Window({    node:"customDiv"});

Related sample: Window. Window Container


If no HTML container is specified, the window will be placed in the body.


You can provide a window with a footer that will include some additional controls for manipulating the content.

var dhxWindow = new dhx.Window({    footer:true});

Related sample: Window. Window With Footer

By default a footer is initialized with no controls. To add a control into the footer, you need to manipulate the footer object of the toolbar. Follow the instructions given in the Customization article.


It is possible to make a window modal, if there's a necessity. Use the modal property to turn this functionality on:

var dhxWindow = new dhx.Window({    modal:true});

Related sample: Window. Modal Window

A modal window blocks the main window on its calling. It means that only the modal window remains active, while the main window becomes gray and unresponsive.


To equip a window with the ability to be moved around the screen, you should set the movable property to true:

var dhxWindow = new dhx.Window({    movable:true});

Related sample: Window. Movable Window

Overflowing browser window#

By default, a window can't cross the borders of a browser window. To enable such a possibility, make use of the viewportOverflow configuration property.

var dhxWindow = new dhx.Window({    viewportOverflow:true});

Related sample: Window. Viewport Overflow


The property makes sense when set together with the movable property.


The default window has fixed sizes with no possibility to change them from UI. You can switch on the corresponding configuration option to make a window resizable.

var dhxWindow = new dhx.Window({    resizable:true});

Related sample: Window. Resizable Window.

Then you will be able to regulate the sizes of a window by dragging resizers that appear on hovering sides of a window.


To define the resizing limits, set necessary values to the minWidth / minHeight properties.

Setting HTML content#

You can set some HTML content into a window via the html configuration option, as in:

var dhxWindow = new dhx.Window({    htmlContent:"<h1>Header</h1><p>paragraph</p>"});


You can adjust the size of a window via a set of options that define both the initial width and height of a window and the minimal dimensions of the component.

var dhxWindow = new dhx.Window({    width:250,    height:250,    minWidth:170,    minHeight:170});

Related sample: Window. Resizable Window.

Default values of the size-related properties are:


dhtmlxWindow is initialized with an empty header. You can provide some text label for the header of the window via the title property.

var dhxWindow = new dhx.Window({    title: "DHX Window"});

The header can also contain some buttons. You can control them via the header object of the window. Check details in the Customization article.