Simple LightBox Without jQuery

Simple LightBox Without jQuery

by John Grivas

HTML

<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">TEST ME</a>

<div id="light" class="details"> 
    many scores ! : <br>
    test n°1 : 16/20<br>
    test n°2 : 11/20<br>
    test n°3 : 17/20<br>
    test n°4 : 14/20<br>
    test n°5 : 15/20<br>
</div>
<div  onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" id="fade" class="black_overlay"></div>

CSS

.black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.details {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 20%;
    height: 25%;
    padding: 16px;
    border-radius: 15px;
    background-color:#CFE7FF;
    border:1px solid red;
    z-index:1002;
    opacity:1;
    overflow: auto;
    text-align:center;
}
.textright {
    float: right;
}