Membuat Jendela Pop Up Sederhana Dengan CSS

Jendela Pop Up adalah bagian dari website yang kedudukannya di atas element - element lain. Pada tutorial kali ini saya akan memberikan contoh jendela popup sederhana menggunakan CSS tanpa javascript. Untuk membuatnya ikuti langkah - langkah berikut.

Pertama buat script html seperti di bawah ini

<div class="tombol-popup">
<a href="#popup">Klik disini</a>
</div>

<!--Jendela PopUp Disini-->
<div id="popup">
    <div class="jelndela-popup">
        <a href="" class="close">x</a>
        <h1>Hello World</h1>
        <p>Saya berhasil membua jendela popup dengan menggunakan CSS tanpa bantuan javascript</p>
    </div>
</div>

Setelah itu kita buat style nya

html {
    font-family:calibri;
}
h1 {
    margin:0px;
}
#popup {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
}
.jelndela-popup {
    position:relative;
    padding:15px;
    background:#fff;
    width:500px;
    margin:15% auto 0;
    border-top:5px solid #96C;
}  
.close {
    position:absolute;
    right:15px;
    top:10px;
    color:#96c;
    text-decoration:none;
    font-size:20px;
    font-family:Tahoma, Geneva, sans-serif;
    padding:5px 10px;
    background:#eee;
}
.tombol-popup{
    width:200px;
    text-align:center;
    margin:15% auto 0;
    border-radius:5px;
    color:#fff;
    text-decoration:none;
    background:#96C;
    overflow:hidden;
    box-shadow:0px 0px 5px #000;
}
.tombol-popup a{
    padding:20px;
    display:block;
    font-size:20px;
    color:#fff;
    text-decoration:none;
}
#popup:target {
    display:block;
}

Penjelasan

• #popup:target yang akan digunakan untuk memunculkan jendela popup, karena link dari tombol popup mengarah ke #popup. 
• Karena div#popup yang akan menjadi target maka kita tambahkan #popup:target pada script css dan memberi style display:block, agar div#popup bereaksi pada saat kita mengklik tombol popup yang memiliki link #popup.

Penjelasannya agak ribet, kalau belum jelas silahkan berikan komentar....
Selamat Mencoba