html
    ---------
    <div id="overlay"></div>
    <div id="win"><h2><span id="close">*</span></h2></div>
    <center><button>Pop Window</button></center>

    css
    ------------
    #overlay{position: absolute;background: #000;opacity:0.5;filter:alpha(opacity=50); width:100%;height:100%;display: none;}
    #win{position:absolute;top: 50%;left: 50%;width: 400px;height:200px;background: #fff;border: 4px solid #f90;margin:-102px 0 0 -202px; display: none; }
    h2{font-size:20px;text-align: right;padding:5px;background: #FC0;border-bottom: 3px solid #f90;}
    span{color: #f90;cursor: pointer;background: #fff;border:1px solid #f90; padding:0 2px;}
    h2{margin: 0;}

    js
    ------------
    var oWin = document.getElementById('win');
    var oLay = document.getElementById('overlay');
    var oBtn = document.getElementsByTagName('button')[0];
    var oClose = document.getElementById('close');
    
    oBtn.onclick = function()
    {
        oLay.style.display='block';
        oWin.style.display='block';
    }
    oClose.onclick = function()
    {
        oLay.style.display = 'none';
        oWin.style.display = 'none';
    }