JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function popup(src){
var tempX;
var tempY;
tempX=event.clientX + document.body.scrollLeft ;
tempY=event.clientY + document.body.scrollTop ;
//tempX=0;
//tempY=0;
document.getElementById('popup_div').style.left=tempX;
document.getElementById('popup_div').style.top=tempY;
document.getElementById('popup_div').style.display='block';
document.getElementById('popup_div').innerHTML="<img src='"+ src +"' onclick="+"document.getElementById('popup_div').style.display='none'; "+" id='popup_img'>";
//var wi=document.getElementById('popup_img').clientWidth;
var he=document.getElementById('popup_img').clientHeight;
document.getElementById('popup_img').style.height=he;
document.getElementById('popup_div').style.height=he;
}
</script>
</head>
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAYMMQsNea_YiTpEWM_IPs3yOv5TT-cGh-jZ8KOK6PgkiG-hpd" onclick="popup('http://www.fishnet.co.kr/data/C040_1/201808/20180811023201_avzo.jpg')">
<div id="popup_div"></div>
</body>
</html>