Initialization

info

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

Follow these steps to add DHTMLX Popup to an application:

• Include source files
• Initialize Popup with the object constructor
• Add content to Popup

<!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 your project folder.

Create an HTML file and add the paths to the JS and CSS files of the DHTMLX Suite library in its header. 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 the popup on a page, call the show() method after you initialize the component.

Set content

You can add content to DHTMLX Popup in the following ways:

• Use the attachHTML() method to attach HTML content to Popup:

• Use the attach() method to attach other DHTMLX components to Popup: