onBeforeHide
To hide popup - click outside, select any item or press esc key
click/select will allow closing, esc - not
<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></script> <style> </style> <div id="myToolbar"></div> <div id="eLog"> <br>To hide popup - click outside, select any item or press esc key<br> click/select will allow closing, esc - not </div>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", "List"); myPop = new dhtmlXPopup({ toolbar: myToolbar, id: "workbut" }); myPop.attachList("name,price", [{ id: 1, name: "Audi A5 Coupe", price: "€ 31,550" }, { id: 2, name: "Audi A5 Sportback", price: "€ 30,990" }, myPop.separator, { id: 3, name: "Audi A6", price: "€ 30,990" }, { id: 4, name: "Audi A6 Avant", price: "€ 37,450" }, { id: 5, name: "Audi A6 Quattro", price: "€ 55,360" }, myPop.separator, { id: 6, name: "Audi TT Coupe", price: "€ 29,830" }, { id: 7, name: "Audi TT RS Coupe", price: "€ 59,800" }]); myPop.attachEvent("onBeforeHide", function(type) { logEvent("onBeforeHide", type); if (type == "esc") return false; return true; }); }); eLog = document.getElementById("eLog"); } function logEvent(name, type) { eLog.innerHTML = (++eCount) + ": event fired: " + name + ", type=" + type + "<br>" + eLog.innerHTML; eLog.scrollTop = 0; }