Tutorial Lightbox , sebenarnya sudah bertebaran di google.namun jika anda sudah nyasar disini langsung saja simak dari pada harus capek-capek cari di google :D

Membuat Lightbox Sederhana Dengan CSS

CSS

.bg_hitam{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #C2C2C2;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
.kotak {
        display: none;
        position: absolute;
        position: fixed;
        top: 20%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 3px solid #DDDDDD;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 0 10px 0.1px #242424;
        z-index:1002;
        overflow: auto;
    }

HTML

<a onclick="document.getElementById('popup').style.display='block';document.getElementById('bg').style.display='block'" href="javascript:void(0)">Klik Disini</a>
<div id="bg" class="bg_hitam">isi lightbox</div>
<div id="popup" class="kotak">
<a onclick="document.getElementById('popup').style.display='none';document.getElementById('bg').style.display='none'" href="javascript:void(0)"> TUTUP</a>
</div>

NB : jika ingin menggunakan lightbox ini pada elemen yang berbeda-beda,silahkan ganti kode 'popup' dengan kode apapun misal 'lightbox' juga bisa,asalkan semua kode yang bernama popup di HTML diatas , diganti.