$(function() {
	const json = [{var: 'urltoken', val: 'CFID=887992&CFTOKEN=52372562'}, {var: 'lastvisit', val: 'ts 2022-10-26 16:08:16'}, {var: 'hitcount', val: '276'}, {var: 'timecreated', val: 'ts 2022-10-24 10:53:01'}, {var: 'cftoken', val: '52372562'}, {var: 'cfid', val: '887992'}];	

	$("#btnShow").dxButton({
	    text: 'Show',
	    width: '75px',
	    onClick: function () {
			
			ShowPopUp()

	    }
	});

function ShowPopUp(sString) {
    
        $("html").prepend('<div id="popupContainer"></div>');

        $('#popupContainer').dxPopup({
            contentTemplate: $('#content_template'),
            width: 550,
            height: 750,
			title: 'Client Variables',
            hideOnOutsideClick: true,
			showCloseButton: false,
			toolbarItems: [{
		      	widget: 'dxButton',
		      	toolbar: 'bottom',
		      	location: 'after',
		      	options: {
		        	text: 'Close',
		        	onClick: function () {
                    	let e = $("#popupContainer").dxPopup("instance");
                    	e.hide();
                	},
		      },
		    }],
            onShown: function () {
                $("#gridInPopup").dxDataGrid({
                    dataSource: json,
 					showRowLines: true,
					width: 500,
                    columns: [{
					dataField: 'var',
					},
					{
					dataField: 'val',
						    
                    }],
                });
            },
            animation: {
                show: { type: "slide", from: { opacity: 1, top: -$(window).height() }, to: { top: 50 } },
                hide: { type: "slide", from: { top: 50 }, to: { top: -$(window).height() } }
            }
        });

        $("#popupContainer").dxPopup("instance").show();
    }
});