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.
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 :)
Setelah itu buatlah file style.css dan simpan pada folder file index.html tadi. Kemudian Ketik script berikut.
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.
Kemudian, supaya hyperlink yang pertama itu terlihat seperti tombol beneran, tambahkan script berikut.
Setelah di save, refresh browser anda. Maka akan ada tombol di hadapan anda.
Lalu bagaimana dengan jendela Pop Up-nya? Sabar! Tambahkan saja script berikut.
Coba refresh browser anda. Dan.. Jendela Pop Up berhasil kita buat.
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.
Setelah browser anda refresh, pasti jendela Pop Up tadi hilang.
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.
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.
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!
Sumber inspirasi:
http://www.ariona.net/teknik-dasar-membuat-overlay/
http://w3schools.com/cssref/css_selectors.asp
Nice trick.
Tip: tambahin transition di #popup-nya, jadi lebih smooth, pasti lebih bagus tuh ;)
yang langsung onload saat page di buka gimana gan…. ??
Gua ngerti ko min gua ngerti :3 hahaha
[…] jalur tutorial-webdesign […]
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 !
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.
Nice tutorial masbro. ijin berlangganan RSSnya. :) bakal sering2 mampir nih buat intip-intip, hehe. Lanjutkan
silahkan :)
saya suka blognya..
jendela pop up yang ada di website ini juga pakai ini ya mas bro ?
terimakasih banyak kawan . . .
om, kode css yang * { margin:0; padding:0; } itu ganggu yang lain tapi kalau dihapus jadi berantakan pop upnya.. Ada alternatif gak om?
Gunakan margin:0; padding:0 di element yg diinginkan saja
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,, :/
izin nyoba gan…
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
solusinya tambahin
overflow-y: scroll;
dibagian div yang menampung gambar tersebutKeren abis ni web , makasi gan :D
Gan mau nanya , kalau didalam pop-up nya saya tambahin seperti tombol like facebook / twitter itu gimana ya caranya ? tq
Tinggal masukin aja kode fb dan twitternya ke div yang digunakan untuk popup itu
gan…cara nambahin gambar di dlm pop up nya gmn??
kasih aja script
di div yang digunakan untuk popupnya
[…] jalur tutorial-webdesign […]
Keren mas pop up nya
Mampir ya Mas di blog saya httx://jebret-cerot.blogspot.com/
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!
min,kalo onload page popup nya otomatis gmn?
jadi gak perlu button buat munculin popupnya
wih sangat bermanfaat nih artikelnya masgan,izin coba ya gan :)
sangat membantu , :)
terima kasih mas , lumayan buat project kuliah :)
y, keren nih….pure css :)
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
:)
gimana supaya jalan di ie * ya mas
caranya supya jakan di IE8
gimana ya?
kalau mau dibuat banya link untuk popup, bagaimana yah caranya?
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,
Tutorial lengkap.. udah dicoba dan Mankyosss hasilnya.. tambah makin sip nih tutorial webdesign..
tolong Cara on load gimana gan?,tanpa tombol
terima kasih mas, sangat membantu.
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)
boleh tanya kah, kenapa pop up nya tidak berjalan di windows explorer. di klik tidak bisa ??
Om tolong gimana caranya bikin multi popup jangan hanya satu popup om
Copy saja script yang sama namun bedakan ID nya
udah saya bedakan id popupnya kok gabisa ya mana aja yang dibedakan
terimakasih untuk linknyaa
mas mau nanya,, yg #popup:target..target itu penamaan yg mana
target itu mengacu pada anchor link yang dimana href nya itu ditandai dengan tanda #
Untuk lebih memahami coba baca disini
Kalau kliknya tidak pakai link text gimana caranya? Jadi klik dimana saja untuk menampilkan pop up.