Membuat Jendela Pop Up Dengan CSS

Gagah Pangeran URL:http://www.tutorial-webdesign.com/ntapi
July 12th, 2013 Tutorial, Web Design 44 Comments

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 :)

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.

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.

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.

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.

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

Follow @tut_web

Tags:

Sort URL http://www.tutorial-webdesign.com/ntapi
Back To Top

Penulis :

Gagah Pangeran

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

http://selalu-ada.mywapblog.com/

Comments

44 thoughts on “Membuat Jendela Pop Up Dengan CSS”

Iqbal Perkasa says:

July 12, 2013 at 14:15

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

Reply
mazadie says:

August 27, 2013 at 09:31

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

Reply
syakir says:

September 14, 2013 at 16:16

Gua ngerti ko min gua ngerti :3 hahaha

Reply
Popup dengan CSS | Duniatekno says:

September 18, 2013 at 11:24

[…] jalur tutorial-webdesign […]

Reply
Reinhart says:

September 19, 2013 at 20:05

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 !

Reply
- Reinhart says:
  
  September 19, 2013 at 20:15
  
  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.
  
  Reply
massol507 says:

September 20, 2013 at 10:23

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

Reply
- TWD Editorial says:
  
  September 20, 2013 at 16:35
  
  silahkan :)
  
  Reply
astin says:

September 23, 2013 at 18:40

saya suka blognya..

Reply
Ricky Orlando Napitupulu says:

September 26, 2013 at 12:30

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

Reply
ma'ruf says:

October 15, 2013 at 12:41

terimakasih banyak kawan . . .

Reply
Alfon says:

November 1, 2013 at 19:30

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

Reply
- TWD Editorial says:
  
  November 4, 2013 at 13:33
  
  Gunakan margin:0; padding:0 di element yg diinginkan saja
  
  Reply
indra says:

November 6, 2013 at 15:15

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,, :/

Reply
PULSA MURAH says:

November 16, 2013 at 20:41

izin nyoba gan…

Reply
Roman says:

November 20, 2013 at 05:37

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

Reply
- TWD Editorial says:
  
  November 20, 2013 at 09:29
  
  solusinya tambahin overflow-y: scroll; dibagian div yang menampung gambar tersebut
  
  Reply
Daniel says:

December 1, 2013 at 15:40

Keren abis ni web , makasi gan :D

Reply
CSS says:

December 1, 2013 at 15:42

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

Reply
- TWD Editorial says:
  
  December 2, 2013 at 00:00
  
  Tinggal masukin aja kode fb dan twitternya ke div yang digunakan untuk popup itu
  
  Reply
Jack says:

December 2, 2013 at 16:45

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

Reply
- TWD Editorial says:
  
  December 2, 2013 at 19:30
  
  kasih aja script di div yang digunakan untuk popupnya
  
  Reply
Popup dengan CSS | Jendela Tekno says:

April 23, 2014 at 16:36

[…] jalur tutorial-webdesign […]

Reply
Martinus Sarumaha says:

April 25, 2014 at 16:32

Keren mas pop up nya

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

Reply
Taufan says:

May 3, 2014 at 16:54

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!

Reply
calganzero says:

May 12, 2014 at 08:03

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

Reply
MGcasar says:

May 17, 2014 at 13:11

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

Reply
cahyo says:

June 6, 2014 at 18:15

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

Reply
Bornea says:

June 16, 2014 at 12:30

y, keren nih….pure css :)

Reply
Terpusat Media says:

August 5, 2014 at 13:45

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

:)

Reply
carles says:

August 27, 2014 at 10:48

gimana supaya jalan di ie * ya mas

Reply
carles says:

August 27, 2014 at 11:23

caranya supya jakan di IE8
gimana ya?

Reply
Jasa Penerjemah says:

December 11, 2014 at 18:22

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

Reply
Anggi Wisnu says:

December 15, 2014 at 10:31

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,

Reply
SEO Gereggi says:

January 13, 2015 at 12:46

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

Reply
roni says:

January 20, 2015 at 00:40

tolong Cara on load gimana gan?,tanpa tombol

Reply
gibson says:

February 11, 2015 at 19:55

terima kasih mas, sangat membantu.

Reply
Dirga says:

July 11, 2015 at 06:08

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)

Reply
ayu says:

April 14, 2016 at 08:02

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

Reply
Yoga says:

January 7, 2017 at 22:23

Om tolong gimana caranya bikin multi popup jangan hanya satu popup om

Reply
- TWD Editorial says:
  
  January 7, 2017 at 23:07
  
  Copy saja script yang sama namun bedakan ID nya
  
  Reply
grace says:

January 30, 2017 at 21:55

terimakasih untuk linknyaa

Reply
rahmad says:

April 17, 2017 at 14:14

mas mau nanya,, yg #popup:target..target itu penamaan yg mana

Reply
- TWD Editorial says:
  
  April 21, 2017 at 09:48
  
  target itu mengacu pada anchor link yang dimana href nya itu ditandai dengan tanda #
  Untuk lebih memahami coba baca disini
  
  Reply