Selamat Datang

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





Penulis :

Gagah Pangeran - Lahir di Jakarta, 29 Juli tahun 2000. Bernama lengkap Gagah Pangeran Rosfatiputra, hasil peranakan antara orang jawa dan mesin jahit. Tertarik dengan dunia web designer sejak 1 tahun yang lalu. Pendidikan terakhirnya adalah SMP kelas 3. Keahliannya adalah pandai membantu (menyusahkan) orang tua, jago melipat kertas, dan cepat mengangkat jemuran. Aktivitasnya sehari-hari adalah berlomba makan kelereng dengan teman-temannya. Misi utamanya adalah mencerdaskan kehidupan bangsa. Cita-citanya sekarang adalah keliling Jakarta menggunakan bajaj (cetek banget cita-citanya). Tujuannya bergabung di tutorial-webdesign.com adalah untuk mengacak-acak website ini. (just kidding bro!) View all posts by Gagah Pangeran

Comments

39 thoughts on “Membuat Jendela Pop Up Dengan CSS

  1. Nice trick.
    Tip: tambahin transition di #popup-nya, jadi lebih smooth, pasti lebih bagus tuh ;)

  2. mazadie says:

    yang langsung onload saat page di buka gimana gan…. ??

  3. syakir says:

    Gua ngerti ko min gua ngerti :3 hahaha

  4. […] jalur tutorial-webdesign […]

  5. Reinhart says:

    gan! gile, keren habis, gua sampai bilang wow 5 menit! hahaha maklum newbie~

    skrng yg jadi pertanyaan, gmn caranya nyisipin pop up ini ke website sederhana (halaman.html paling awal) dan mengatur posisinya.. mohon bantuannya !

    • Reinhart says:

      ok dah bisa gerakin center, left , right
      10 #button {
      11 margin: 5% auto;
      12 width: 100px;
      13 text-align: center;
      14 }

      blum bisa nyisipin…. :(
      trus, biar bisa lebih dari satu pop up gmn nih.. jadi ada 2 atau 3 (click me) dalam satu web.

  6. massol507 says:

    Nice tutorial masbro. ijin berlangganan RSSnya. :) bakal sering2 mampir nih buat intip-intip, hehe. Lanjutkan

  7. astin says:

    saya suka blognya..

  8. jendela pop up yang ada di website ini juga pakai ini ya mas bro ?

  9. ma'ruf says:

    terimakasih banyak kawan . . .

  10. Alfon says:

    om, kode css yang * { margin:0; padding:0; } itu ganggu yang lain tapi kalau dihapus jadi berantakan pop upnya.. Ada alternatif gak om?

  11. indra says:

    mass… klo popup untuk menampilkan database gimana ya???
    misalkan saya punya database siswa yg dimunculkan di sebuah halaman,, data hanya terdiri dari nis , nama dan kelas,,,
    kemudian saya ingin memunculkan popup ketika ingin mengetahui detail dari data siswa tsb yg lebih lengkap misalkan ada tambahan alamat, nama org tua dll…
    kira2 bagaimana caranya??
    saya coba dengan membuat perintah $_GET pada bagian div popupnya,, tetapi popupnya ketika di kilk langsung hilang,, :/

  12. Roman says:

    mmm, kalo popup nya untuk konten yang besar, misalkan gambar, terlalu panjang kebawah. Tapi window popup sudah di setting, kok gak muncul scrollnya ya? jadi kepotong gitu. gimana solusinya mas? hehe

  13. Daniel says:

    Keren abis ni web , makasi gan :D

  14. CSS says:

    Gan mau nanya , kalau didalam pop-up nya saya tambahin seperti tombol like facebook / twitter itu gimana ya caranya ? tq

  15. Jack says:

    gan…cara nambahin gambar di dlm pop up nya gmn??

  16. […] jalur tutorial-webdesign […]

  17. Keren mas pop up nya

    Mampir ya Mas di blog saya httx://jebret-cerot.blogspot.com/

  18. Taufan says:

    Mas udah sy coba di web saya berhasil, tapi saat saya buka di smartphone saya ternyata gak responsive pop up nya. Gmn biar responsive? fix it!

  19. calganzero says:

    min,kalo onload page popup nya otomatis gmn?
    jadi gak perlu button buat munculin popupnya

  20. MGcasar says:

    wih sangat bermanfaat nih artikelnya masgan,izin coba ya gan :)

  21. cahyo says:

    sangat membantu , :)
    terima kasih mas , lumayan buat project kuliah :)

  22. Bornea says:

    y, keren nih….pure css :)

  23. tapi min itu ngorbanin banyak link di halaman kan, make targetnya harus link yg otomatis ga bakal seo kalo popupnya banyakk…. mungkin harus ditambah sedikit JS kali ya buat kebutuhan dan mengurangi penggunaan a href

    :)

  24. carles says:

    gimana supaya jalan di ie * ya mas

  25. carles says:

    caranya supya jakan di IE8
    gimana ya?

  26. kalau mau dibuat banya link untuk popup, bagaimana yah caranya?

  27. Anggi Wisnu says:

    gan… Kalo mau nyisipin biar bisa 2 pop_up gimana?
    ane mau bikin menu login dan register pake pop_up.

    udah dicoba pake a href=”#popup_register” tapi malah gak kebuka.
    kalo pake #popup aja. cuma menu login aja yg keluar.

    Maklum masih newbie. Mohon pencerahannya. Makasih,

  28. SEO Gereggi says:

    Tutorial lengkap.. udah dicoba dan Mankyosss hasilnya.. tambah makin sip nih tutorial webdesign..

  29. roni says:

    tolong Cara on load gimana gan?,tanpa tombol

  30. gibson says:

    terima kasih mas, sangat membantu.

  31. Dirga says:

    sorry sebelum nya min, rencana tampilan pop up nya mw ane buat jd form nih semacam form tambah barang gitu, bisa kah? boleh minta tips nya n masukannya? thanks bgt sebelum nya (y)

  32. ayu says:

    boleh tanya kah, kenapa pop up nya tidak berjalan di windows explorer. di klik tidak bisa ??

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development