[SOLVED]Pop up window in drilldown

-DEFAULT &COUNTRY = '_FOC_NULL';
TABLE FILE CAR
SUM SALES
BY COUNTRY
BY CAR
BY MODEL
WHERE COUNTRY EQ '&COUNTRY'
ON TABLE SET STYLESHEET *
TYPE=DATA, COLUMN=COUNTRY, JAVASCRIPT=drillto('CARINST' COUNTRY 'Example Drilldown using jQuery'), $
ENDSTYLE
ON TABLE HOLD AS H001 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<!DOCTYPE html>
<head>
<style type="text/css">
-*	I'm using the id of each div to assign CSS
#divdrill {
	position: absolute; top: 100px; left: 150px; background-color: #fff; z-index: 100; border: 1px solid; moz-border-radius: 3px; webkit-border-radius: 3px;
	border-radius: 3px;
}
#hdrdrill {
	background-color: #f00; width: 100%; height: 22px; moz-border-top-left-radius: 3px; -moz-border-top-right-radius: 3px; webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px;
	border-top-left-radius: 3px; border-top-right-radius: 3px;
}
#btndrill {
	height: 20px; width: 20px; float: right;
	background-image: url(/ibi_html/javaassist/icons/Exit16.gif);
	background-repeat :no-repeat;
}
span {
	margin-left: 4px;
}
</style>

Focal Point – Drilldown using jQuery

<!-- Within WF8, these JS and CSS Libraries are installed as standard -->
<script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css" />

<!--
	This is thejQuery that is executed on drildown click
	All it does is to remove the drilldown div (in case it already exists)
	and then create an outer div containing 3 inner divs, 2 for the heading
	and 1 for the drill down report content.
	The 2 heading divs contain the title plus the image for closing the pop-up.
-->

<script type="text/javascript">
function drillto(fex, country, title) {
	// If the drill down div exists then "close it"
 	if ($("#divdrill")) {closeit();}

	// Build the div collection that will house the drill down report
 	var myhtml = "<div id='divdrill'>";
 		myhtml += "<div id='hdrdrill'><span>"+title+"</span>";
 		myhtml += "<div id='btndrill' onclick='closeit();'></div>";
 		myhtml += "</div><div id='divnum_1'></div></div>";

	// Append the div collection to the document body
 	$("body").append(myhtml);

	// Build the URL required to execute the drill down report
 	var _ajaxurl = "/ibi_apps/WFServlet?IBIAPP_app=ibisamp";
 		_ajaxurl += "&|IBIF_ex="+fex+".fex&|COUNTRY="+country;

	// and insert the html from the drill down report as the innerHtml
 	$.get(_ajaxurl, function(data){$("#divnum_1").html(data)});

	// This is the "magic" that allows the drill down div to be dragged!, doesn't work.
 	$("#divdrill").draggable();
}

// Remove the div collection
function closeit() {
	$("#divdrill").remove();
}
</script>
</head>
<body style="overflow: hidden;">
	!IBI.FIL.H001;
</body>
</html>
-HTMLFORM END