Initialization

To initialize dhtmlxWindow on a page, you need to take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxWindow</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <script>
            // creating dhtmlxWindow 
            var dhxWindow = new dhx.Window({
                header: "DHX Window",
                modal: false,
                resizable: true,
                movable: true
            });
</script> </body> </html>

Related sample:  Basic initialization - DHTMLX Window

Include source files

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Initialize Window

Initialize Window with the dhx.Window object constructor. The constructor takes an optional parameter:

  • an object with configuration properties (see the full list below). If this argument is not passed to the constructor, the settings will be default.

Don't use window as a variable name for dhxWindow object, since it is reserved for the browser window.

window.html

// creating dhtmlxWindow
var dhxWindow = new dhx.Window({
    modal: false,
    resizable: true,
    movable: true
});
dhxWindow.show();

Related sample:  Basic initialization - DHTMLX Window

To show a created window on a page, you should call the show() method after initialization of the component.

There is a set of properties you can specify for Window to optimize its configuration for your needs. Read the details below.

Configuration properties

You can specify the following properties in the configuration object of Window:

  • title - (string) adds some text into the header of a window
  • viewportOverflow - (boolean) defines whether a window can go beyond borders of a browser window
  • resizable - (boolean) defines whether a window can be resized
  • movable - (boolean) defines whether a window is movable
  • modal - (boolean) defines whether a window is modal
  • closable - (boolean) defines whether a window can be closed
  • width - (number) sets the width of a window, 50% of the browser window's width by default
  • height - (number) sets the height of a window, 50% of the browser window's height by default
  • minWidth - (number) sets the minimal width of a window, 100 by default
  • minHeight - (number) sets the minimal height of a window, 100 by default
  • footer - (boolean) adds a footer for a window
  • css - (string) adds style classes for the component
  • html - (string) sets an HTML content into a window on initialization

The detailed information on configuration options can be found in the Configuration article.

Set content

There are several ways of adding content into the dhtmlxWindow:

  • by using attachHTML to attach some HTML content into a window on the fly
var dhxWindow = new dhx.Window({title: "Window"});
var html = "<h1>Header</h1><p>paragraph</p>";
dhxWindow.attachHTML(html);
dhxWindow.show();

Related sample:  Attach HTML to Window - DHTMLX Window

  • by calling attach to attach other DHTMLX components
dhxWindow.attach("richtext",{mode: "document"});
dhxWindow.show();

Related sample:  Attaching other components - DHTMLX Window

  • via the html property to attach some HTML content into a window before initialization
var dhxWindow = new dhx.Window({
    htmlContent:"<h1>Header</h1><p>paragraph</p>"
});
Back to top