Tutorial cara membuat popup dengan css dan javascript | Popup merupakan salah satu elemen yang cukup penting pada sebuah website, apalagi untuk aplikasi web yang sangat membutuhkan interaksi dengan penggunanya.
Popup biasanya akan muncul ketika user melakukan klik pada sebuah menu atau link untuk menampilkan informasi agar bisa menghemat ruang dan menciptakan user experience (UX) yang menarik. Popup biasanya akan tertutup apabila pengguna melakukan klik pada tombol close (X) atau pada ruang diluar area popup tersebut.

Pupup css javascript
Pada tutorial kali ini Jurnalweb.com akan menjelaskan sedikit cara membuat pupup dengan css dan javascript, kita coba untuk membuat ini dengan sangat sederhana dan tidak memerlukan jquery untuk melakukan ini agar kodingnya menjadi lebih ringan.
Berikut tutorial membuat popup dengan css dan javascript
Struktur HTML
Pertama buat terlebih dahulu struktur HTML dari popup tersebut seperti script dibawah ini
<h2>Membuat Popup Sederhana dengan Javacript dan CSS</h2>
<!-- trigger the jwpopup -->
<a href="javascript:void(0);" id="jwpopupLink">Klik disini untuk membuka popup</a>
<!-- jwpopup box -->
<div id="jwpopupBox" class="jwpopup">
<!-- jwpopup content -->
<div class="jwpopup-content">
<div class="jwpopup-head">
<span class="close">×</span>
<h2>[Popup Header] Popup dengan Javascript dan CSS</h2>
</div>
<div class="jwpopup-main">
<p>[Popup Content] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis maxime nobis quod veritatis facere velit cum optio obcaecati soluta ratione amet iusto nulla, expedita blanditiis tempora inventore tempore impedit itaque.</p>
</div>
<div class="jwpopup-foot">
<p>[Popup Footer] Creating popup using Javascript and CSS</p>
</div>
</div>
</div>
Styling dengan CSS
Popup adalah sebuah elemen yang awalnya tersembunyi lalu akan muncul ketika ada pemicu, yaitu ketika sebuah link dengan ID tertentu di klik, dalam contoh ini kita buat link dengan ID #jwpopupLink
.
Untuk menyembunyikan atau menampilkan elemen, kita menggunakan CSS, jadi dengan CSS kita coba untuk membuat elemen tersebut tersembunyi secara default. Berikut script css lengkap yang dibutuhkan.
body{
font-family: arial, verdana, sans-serif;
}
/* jwpopup box style */
.jwpopup {
display: none;
position: fixed;
z-index: 1;
padding-top: 110px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.7);
}
.jwpopup-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
max-width: 500px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.jwpopup-head {
font-size: 11px;
padding: 1px 16px;
color: white;
background: #006faa; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#006faa, #002c44); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#006faa, #002c44); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#006faa, #002c44); /* For Firefox 3.6 to 15 */
background: linear-gradient(#006faa, #002c44); /* Standard syntax */
}
.jwpopup-main {padding: 5px 16px;}
.jwpopup-foot {
font-size: 12px;
padding: .5px 16px;
color: #ffffff;
background: #006faa; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#006faa, #002c44); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#006faa, #002c44); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#006faa, #002c44); /* For Firefox 3.6 to 15 */
background: linear-gradient(#006faa, #002c44); /* Standard syntax */
}
/* tambahkan efek animasi */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* style untuk tombol close */
.close {
margin-top: 7px;
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #999999;
text-decoration: none;
cursor: pointer;
}
Buat interaktif dengan Javascript
Agar popup bisa interaktif, maka elemen popup yang tadinya diatur tersembunyi dengan bantuan CSS display:none
maka harus diubah menjadi display:block
agar popup bisa muncul. Untuk merubah property css tersebut dibutuhkan bantuan javascript. Berikut ini kode javascript yang dibutuhkan untuk hal tersebut.
// untuk mendapatkan jwpopup
var jwpopup = document.getElementById('jwpopupBox');
// untuk mendapatkan link untuk membuka jwpopup
var mpLink = document.getElementById("jwpopupLink");
// untuk mendapatkan aksi elemen close
var close = document.getElementsByClassName("close")[0];
// membuka jwpopup ketika link di klik
mpLink.onclick = function() {
jwpopup.style.display = "block";
}
// membuka jwpopup ketika elemen di klik
close.onclick = function() {
jwpopup.style.display = "none";
}
// membuka jwpopup ketika user melakukan klik diluar area popup
window.onclick = function(event) {
if (event.target == jwpopup) {
jwpopup.style.display = "none";
}
}
Demo dan Download
Apabila Anda tertarik untuk mencoba atau menggunakan contoh popup ini, Anda bisa melihat DEMO atau download script nya disini.
kl pop up nya otomatis saat halaman dibuka gmn?
mas, infonya yang ini sangat bermanfaat… saya mau menanyakan bagaimana cara menaruhnya di post wordpress, saya copy code nya tidak mau muncul pop up nya terimakasih
Edit theme nya lalu taruh disitu, biasanya dibagian header.php
Gan pop up mempengaruhi kecepatan loading website hak ya?
Tks
Bisa mempengaruhi karena menambahkan popup berarti menambah script website tersebut
bisa dikombinasikan dengan form input ga gan?
misalkan form input ada field id sama nama, trus ketika button submit ditekan data yang di form input tadi muncul di dalam popup – body nya gan?
thanks before
Bisa saja dibuat seperti itu
ada contohnya gan? atau ga script bagaimana caranya manggil tu $_post dari form kedalam popupnya
Up nih. Sama seperti apa yang mau di tanyakan.
bang kalo mau buat pop up untu melakukan tindakan pada user, misalnya download atau ngisi suvey gimana ya bang?
bang itu JS-nya diletakin dibeda file apa jd satu sama html?