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

<!DOCTYPE html>
        <title>How to Start with dhtmlxPopup</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
            // 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 dhtmlxPopup
var 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. It takes several parameters:

  • element - (HTMLElement) mandatory, the container to place a popup in
  • config - (object) optional, the configuration object of a popup. Can contain the properties below:
    • centering - (boolean) defines whether a popup should be centered relative to the element, true by default
    • auto - (boolean) enables autopositioning of a popup, i.e. it will be shown at that side of an element which provides enough space for a popup
    • mode - (string) the position relative to the element to show a popup at:"left","right","bottom" (default),"top"

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

Back to top