modal dialog css(essence)

modal-dialog.css

.lap{
    visibility: collapse;
}
.lap::target{
    visibility: visible;
}
.lap::target .overlap{
    opacity: 0.2;
    transition:  1s;    
}
.lap:target .innerWindow{
    opacity: 1;
    transition:  1s;    
}
.overlap{
    top:0;
    left:0;
    width:100%;
    height:100%;
    
    position:fixed;
    
    opacity:0;
    background:#000;
    
    z-index: 900;
}
.innerWindow{
    background:#fff;
    margin:10px;
    padding:20px;
    
    top:40%;
    left:40%;
    width:20%;
    height:20%;
    
    position:fixed;
    opacity:0;
    z-index:1000;
}

modal-dialog.html

<p id="openlocation"><a href="#lap">open dialog</a>
 
<div  class="lap" id="lap">
        <a href="#openlocation" class="overlap">X</a>
    <div class="innerWindow">
        TITLE<br>
        <a href="#openlocation">X  Close</a>
    </div>
</div>
</p>

moving sample:
http://edutainment-fun.com/hidemaru/it/web/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AB%E5%AE%9F%E7%8F%BE%E3%81%97_2484.html#lap

explain:
http://edutainment-fun.com/hidemaru/it/web/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AB%E5%AE%9F%E7%8F%BE%E3%81%97_2484.html#openlocation