<meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css"/>
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxpopup_dhx_skyblue.css"/>
    
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
    <script src="../../codebase/dhtmlxpopup.js"></script>
    
    <style>
        #myToolbar {
            margin: 10px;
        }
        #eLog {
            height: 200px;
            overflow: auto;
            border: 1px solid #cecece;
            font-size: 11px;
            font-family: Tahoma;
            margin: 100px 10px 10px 10px;
            width: 400px;
            padding: 2px;
        }
    </style>
    <script>
 
var myToolbar;
var myPop;
var eLog;
var eCount = 0;
 
function doOnLoad() {
 
    myToolbar = new dhtmlXToolbarObject("myToolbar", "dhx_skyblue");
    myToolbar.setIconsPath("../common/imgs/");
    myToolbar.loadXML("../common/toolbar.xml?etc=" + new Date().getTime(), function() {
 
        myToolbar.setItemText("workbut", "Click #1");
        myToolbar.addButton("second", null, "Click #2", "settings.gif");
 
        myPop = new dhtmlXPopup({
            toolbar: myToolbar,
            id: ["workbut", "second"]
            });
 
        myPop.attachList("name,price", [{
            id: 1,
            name: "Audi A5 Coupe",
            price: "&euro; 31,550"
        }, {
            id: 2,
            name: "Audi A5 Sportback",
            price: "&euro; 30,990"
        }, myPop.separator, {
            id: 3,
            name: "Audi A6",
            price: "&euro; 30,990"
        }, {
            id: 4,
            name: "Audi A6 Avant",
            price: "&euro; 37,450"
        }, {
            id: 5,
            name: "Audi A6 Quattro",
            price: "&euro; 55,360"
        }, myPop.separator, {
            id: 6,
            name: "Audi TT Coupe",
            price: "&euro; 29,830"
        }, {
            id: 7,
            name: "Audi TT RS Coupe",
            price: "&euro; 59,800"
        }]);
 
        myPop.attachEvent("onShow", function(id) {
            logEvent("onShow", id);
        });
 
        myPop.attachEvent("onHide", function(id) {
            logEvent("onHide", id);
        });
 
    });
 
    eLog = document.getElementById("eLog");
}
 
function logEvent(name, callerId) {
    eLog.innerHTML = (++eCount) + ": event fired: " + name + ", callerId: " + callerId + "<br>" + eLog.innerHTML;
    eLog.scrollTop = 0;
}</script>
    <style>
        
        
    </style>
 
 
    <div id="myToolbar"></div>
    <div id="eLog">
        <br>Click &lt;Click #1&gt; or &lt;Click #2&gt; button to show/hide popup<br>
        Press Esc key or click outside to hide popup
    </div>