JSFiddle - React, Tailwind, and code Playground

by parag1111

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

</style>
<script>
    function openpopup(e)
    {
        
        var popupdiv = document.getElementById(e);
        var model = document.getElementById("blanket");                
            popupdiv.style.display = "block";
            model.style.display = "block";
            
        var oheight = popupdiv.offsetHeight / 2;
        var owidth = popupdiv.offsetWidth / 2;
        var wheight = window.innerHeight / 2;
        var wwidth = window.innerWidth / 2;
    
            popupdiv.style.top = parseInt((wheight - oheight) * 100 / (wheight*2)) + "%";
            popupdiv.style.left = parseInt((wwidth - owidth) * 100 / (wwidth*2)) + "%";    
            
    }
</script>
</head>

<body>
<a href="javascript:openpopup('popupDiv')">to open popup</a>

<div id="blanket"></div>
    
<div id="popupDiv">this is my popup.</div>

</body>
</html>

CSS

#popupDiv{display:none; position:absolute; z-index:100000; height:300px; width:300px; background:#ddd;}

#blanket{display:none; height:100%; width:100%; background:#000; position:fixed; left:0; top:0;}