Membuat Jendela Pop Up Dengan CSS

Mungkin memunculkan jendela Pop Up atau Overlay hanya bisa dilakukan oleh javascript saja. Tapi dengan semakin pesatnya kehebatan CSS, kita bisa membuat jendela Pop Up sederhana. Bagaimana Caranya? Check it out.
Pertama dan yang paling utama sudah pasti membuat markup html nya dulu lah. Tanpa adanya file html, mana mungkin bisa dibuat.
<div id="button"><a href="#popup">Click Me</a></div>

<div id="popup">
    <div class="window">
        <a href="#" class="close-button" title="Close">X</a>
        <h1>Jendela Pop Up</h1>
        <p>Ini adalah jendela Pop Up sederhana tanpa javasript<br/>
        Jendela ini dimunculkan oleh CSS<br/>
        Untuk menutup jendela ini, klik tombol close di kanan atas</p>
    </div>
</div>

Setelah itu simpan dengan nama file index.html atau apa saja. Kemudian double click file html nya.
Dan… Jeng.. jeng.. jeng..!!! Gak terjadi apa apa. Ya iyalah, kita belum kasih style nya :)
popup1
Setelah itu buatlah file style.css dan simpan pada folder file index.html tadi. Kemudian Ketik script berikut.
* {
margin: 0;
padding: 0;
}

body, html {
font-family: Calibri, "times new roman", sans-serif;
}

Style di atas hanya untuk me-reset margin dan padding, serta mengatur jenis font yang digunakan. Coba refresh browser anda, pasti yang berubah hanya margin, padding, dan jenis font-nya saja kan. Memang itu yang tadi kita lakukan.
popup2
Kemudian, supaya hyperlink yang pertama itu terlihat seperti tombol beneran, tambahkan script berikut.
#button {
margin: 5% auto;
width: 100px;
text-align: center;
}

#button a {
background-image: linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
background-color: #2e9fd2;
width: 86px;
height: 30px;
vertical-align: middle;
padding: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
border-radius: 5px;
}

Setelah di save, refresh browser anda. Maka akan ada tombol di hadapan anda.
popup3
Lalu bagaimana dengan jendela Pop Up-nya? Sabar! Tambahkan saja script berikut.
#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: visible;
}

.window {
width: 400px;
height: 100px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}

.close-button {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}

Coba refresh browser anda. Dan.. Jendela Pop Up berhasil kita buat.
popup4
Trus bagaimana cara menyembunyikannya. Kuncinya ada pada visibility: visible yang kita beri pada div #popup. Sekarang kita ganti visibilty dari div #popup tersebut menjadi hidden. Kalo gak tau mana yang diganti, ganti script #popup tadi menjadi seperti berikut.
#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}

Setelah browser anda refresh, pasti jendela Pop Up tadi hilang.
popup5
Coba anda Klik tombolnya, pasti tidak terjadi apa-apa kan. Iya, karena kita belum menambahkan style yang terakhir sekaligus menjadi style kunci. Tambahkan script berikut.
#popup:target {
visibility: visible;
}

Simpan, kemudian refresh browser anda. Kemudian klik tombolnya. Dan.. misi sudah selesai. Jendela Pop Up berhasil kita tampilkan. Untuk menutupnya, klik tombol close yang ada di pojok kanan atas (jadi inget pemilu).
Jadi, style lengkapnya adalah sebagai berikut.
* {
margin: 0;
padding: 0;
}

body, html {
font-family: Calibri, "times new roman", sans-serif;
}

#button {
margin: 5% auto;
width: 100px;
text-align: center;
}

#button a {
background-image: linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
background-color: #2e9fd2;
width: 86px;
height: 30px;
vertical-align: middle;
padding: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
border-radius: 5px;
}

#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}

.window {
width: 400px;
height: 100px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}

.close-button {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}

#popup:target {
visibility: visible;
}

Karena misi sudah selesai, saya mau pergi dulu. Lho!? Kok main pergi aja tanpa memberi penjelasan!? Oke saya jelasin.
Pertama, kita sudah menjadikan jendela pop up nya menghilang dengan mengganti visibility: visible menjadi visibility: hidden. Tapi itu saja belum cukup! Untuk memunculkannya kita harus menekan tombolnya. Karena target dari tombol hyperlink kita adalah #popup, sehingga untuk memunculkannya, kita butuh pseudo-element (apa namanya pseudo-class ya!? Udahlah bodo amat). Karena div #popup tahu dia akan menjadi target dari tombol hyperlink kita. Kita tambakan pseudo-class :target pada div #popup serta menambahkan style visibility: visible, agar supaya div #popup-nya bereaksi ketika tombol diklik dan dia yang dijadikan target. Nah, reaksi itu akan mengubah visibility: hidden menjadi visibility: visible.
Kemudian untuk menyembunyikan jendela Pop Up-nya kembali, kita harus mengklik tombol close. Nah, tombol close itu kan targetnya # alias gak ada. Sehingga saat tombol close di klik, dia akan mengembalikan keadaan seperti semula.
Bingung ya!? Sama, gw aja yang ngetik bingung. Hehe :P
Kesimpulannya : Jendela Pop Up sederhana dapat dibuat dengan CSS bahkan tanpa javascript. Ini menandakan semakin hebatnya kemampuan CSS dalam memanipulasi apapun.
Kesimpulan dari kesimpulannya : Selamat Bereksperimen!
Demo   Download

Sumber inspirasi:
http://www.ariona.net/teknik-dasar-membuat-overlay/
http://w3schools.com/cssref/css_selectors.asp

2 komentar: