Tutorial Cara Membuat Popup dengan CSS dan Javascript

Tutorial Cara Membuat Popup dengan CSS dan Javascript

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.