Skip to main content

Initialization

info

Download the DHTMLX Popup package as a part of the DHTMLX Suite library

To add DHTMLX Popup into an application, you need to take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Popup</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>       
        <script>
            // creating DHTMLX Popup
            const popup = new dhx.Popup();
        </script>
    </body>
</html>

Include source files​

Unpack the downloaded package into a folder of your project.

After that, 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 Popup​

Initialize Popup with the dhx.Popup object constructor.

<div id="popup_container"></div>
// creating DHTMLX Popup
const popup = new dhx.Popup();

popup.show("popup_container");

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

Set content​

There are several ways of adding content into DHTMLX Popup:

  • by using attachHTML() to attach some HTML content into a popup
  • by calling attach() to add other DHTMLX components into a popup