Membuat Lightbox dengan CSS dan Javascript


Beberapa hari yang lalu saya dapat tugas dari teman, dia minta saya membuat halaman dengan pagination dan lightbox, oke…saya langsung acc tugas ini, pastinya saya sidah menyiapkan dua file javascript dan satu file css  yang siap di upload.

Tapi, ernyata eh ternyata saya harus mengedit di halaman postnya, neither css nor javascript linked, weh, lumayan ribet nih, Alhamdulilla akhirnya dapat tips ini,ga tau juga tuh, kenapa si penunlis bilangnya 100% css, tapi menurut ane itu 80%% css dan sisanya java, udah langsung aje dimodif cssnya. (Lumayan mempersingkat waktu…hehe…)

Pertama ane buat dulu skrip html seperti ini

<html>
<head>
	<title>Lightbox css</title>
</head>
	<body>
		<p>Hai, ini adalah sebuah lightbox dibuat menggunakan css dan javascript. Klik di <a href="#">sini</a> untuk melihat lightbox css</p>
	</body>
</html>

Yang pertama css dulu, saatnya menghayal dan berimajinasi, dan ini codenya

.bg_hitam{
	    display: none;
	    position: absolute;
	    position: fixed;
	    top: 0%;
	    left: 0%;
	    width: 100%;
	    height: 100%;
	    background-color: #C2C2C2;
	    z-index:1001;
	    -moz-opacity: 0.8;
	    opacity:.80;
	    filter: alpha(opacity=80);
	}
.kotak {
	    display: none;
	    position: absolute;
	    position: fixed;
	    top: 20%;
	    left: 25%;
	    width: 50%;
	    height: 50%;
	    padding: 16px;
	    border: 3px solid #DDDDDD;
	    background-color: white;
	    border-radius: 8px;
	    box-shadow: 0 0 10px 0.1px #242424;
	    z-index:1002;
	    overflow: auto;
	}

Pada class .bg_hitam ini akan digunakan untuk latar warna hitam transparan, dengan posisi fixed, jadi ketika page di gulung ke atas maupun ke bawah posisi latar letap dan tidak ikut tergulug juga. Lalu class .kotak akan mdigunakan untuk kotak yang muncul, memiliki garis border dan bayangan, biar gak kaku dan tambah elok dikit lah🙂
Kemudian pada anchor text, saya tambahkan skrip ini

<a onclick="document.getElementById('popup').style.display='block';document.getElementById('bg').style.display='block'" href="javascript:void(0)">

Pada getElementById(‘popup’) inilah yang berfungsi memuncuklan kotak popup ketika di klik, lalu mana kotaknya? Hehe…sabar…ini dia skrip untuk kotaknya

<div id="bg" class="bg_hitam"></div>
<div id="popup" class="kotak">
<a onclick="document.getElementById('popup').style.display='none';document.getElementById('bg').style.display='none'" href="javascript:void(0)"> TUTUP</a></div>

Di skrip di atas akan memunculkan latar hitam dan popup kotak, dan anchor text diatas berfungsi untuk menutup kotak popupnya ketika di klik.

Sehingga, total skrip semuanya seperti ini

<p>Hai, ini adalah sebuah lightbox dibuat menggunakan css dan javascript. Klik di
<a onclick="document.getElementById('popup').style.display='block';document.getElementById('bg').style.display='block'" href="javascript:void(0)">sini</a> untuk melihat lightbox css</p>
<div id="bg" class="bg_hitam"></div>
<div id="popup" class="kotak">
<a onclick="document.getElementById('popup').style.display='none';document.getElementById('bg').style.display='none'" href="javascript:void(0)"> TUTUP</a>
</div>

Ingin lihat demo? silahkan klik link dibawah ini
http://muslih.byethost33.com/popup.html

Itu share dari saya, kalo ada yang bikin popup mangga kalo gak keberatan di share uga linknya, bila saran dan ada yang kurang mohon di betulkan dengan memberikan komentar dibawah,i love to discuss. Tujuan saya posting ini bukan untuk menggurui, tapi untuk berbagi dan belajar bersama.

18 thoughts on “Membuat Lightbox dengan CSS dan Javascript

      1. maksudnya di onclik waktu manggil div popup itu kalo ditambahkan paramater dan ditangkap di php bagaimana?

Tinggalkan komentar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s