Skip to main content


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

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

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 Popup#

Initialize Popup with the dhx.Popup object constructor.

<div id="popup_container"></div>
// creating dhtmlxPopupvar popup = new dhx.Popup();"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 the dhtmlxPopup:

  • by using attachHTML() to attach some HTML content into a popup
var popup = new dhx.Popup();popup.attachHTML("<h1>Hello, I'm popup</h1>");"popup");

Related sample: Popup. Html Content

  • by calling attach() to add other DHTMLX components into a popup

Related sample: Popup. Attach Timepicker