Initialization

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/popup.js"></script>
        <link rel="stylesheet" href="../../codebase/popup.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 CSS and JS files of dhtmlxPopup into the header of the created HTML file. The files are:

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

Initialize Popup

Initialize Popup with the dhx.Popup object constructor.

<div id="popup_container"></div>
// creating dhtmlxPopup
var popup = new dhx.Popup();
 
dhxPopup.show("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.show("popup");
  • by calling attach() to add other DHTMLX components into a popup
dhxPopup.attach("slider",{ 
    min: 0,
    max: 100,
    step: 1
});
dhxPopup.show();
Back to top