Javascript Overlay (JSO)

Javascript Overlay

Javascript Overlay adalah teknik untuk memfokuskan pengunjung pada suatu elemen tertentu dengan cara menutupi atau menimpa konten utama dan menampilkan script yang menjadi fokus utama, Biasa di sebut dengan istilah JSO. Jadi maksudnya adalah konten utama tetap ada tetapi kita menutupnya dengan suatu script.

Terkadang website tertentu tidak memproteksi web nya, dan memperbolehkan user biasa menginput script tertentu dan berhasil di eksekusi oleh sistem. Biasanya tindakan ini di lanjutkan dengan tindakan defacing. Teknik JSO pernah digunakan saat situs 1CAK, Babymetal, dan IPB di deface bahkan sering terjadi pada situs pendidikan. JSO dapat dilakukan di berbagai macam CMS seperti wordpress, joomla, opencart, dan sebagainya.

Teknik Dasar Membuat Javascript Overlay (JSO)

Markup HTML

Buatlah sebuah div untuk overlay, dan tempatkan pula konten yang ingin anda tampilkan dalam overlay seperti berikut:

<div class="overlay">
  <div class="box-overlay">
    <a href="#" class="close-button">x</a>
    <h1>Teknik Dasar Membuat Overlay</h1>
    <p>Teknik Overlay sederhana</p>
  </div>
</div>

Satu div dengan class overlay, div ini berfungsi sebagai penutup seluruh konten dan sebuah div dengan class box-overlay yang akan menjadi konten yang ditampilkan ketika overlay aktif.

CSS

Pertama, seperti yang telah saya sebutkan di atas, kita akan merubah div overlay agar menutupi seluruh konten utama situs.

.overlay{
    width:100%;
    height:100%;
    position:fixed;
    background:rgba(0,0,0,.7);
    z-index:9999;
    top:0;
    left:0;
}

width:100%;height:100% pasti sudah tahu kan fungsinya. position:fixed membuat overlay tetap berada pada posisinya meskipun kita melakukan scrolling. background:rgba(0,0,0,.7); kita tambahkan background dengan teknik rgba agar kita memiliki nilai transparansi (alpha) sebesar 70%. dan terakhir adalah z-index:9999 yang berfungsi menempatkan overlay ini di atas seluruh elemen yang ada, saya gunakan nilai 9999 karena sebagian plugin javascript (jquery) terkadang memiliki nilai sebesar itu.

Tugas Selanjutnya adalah memosisikan overlay-box supaya berada di tengah.

.box-overlay{
    width:400px;
    height:150px;
    background:white;
    border-radius:10px;
    margin:20% auto;
    position:relative;
    padding:10px;
    box-shadow:0 0 0 5px rgba(0,0,0,.4);
    text-align: center;
}

Tak ada yang aneh bukan dengan style di atas? hanyalah style-style dasar yang digunakan. position:relative; saya tambahkan karena tombol close akan memiliki position:absolute.

Terakhir kita beri style untuk tombol closenya.

.close-button{
    width: 20px;
    height: 20px;
    background: black;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, .7);
    display: block;
    color: white;
    text-align: center;
    text-decoration:none;
    position:absolute;
    top:-10px;
    right:-10px;
}

Dari style di atas, anda juga dapat memahami penggunaan position relative dan absolute, dalam kasus ini saya terapkan untuk menempatkan posisi tombol close berada di kanan atas dan sedikit keluar dari box overlay. Pemberian border-radius:50% membuat link menjadi bulat. Agar kita dapat mengatur width dan height dari link maka saya tambahkan pula display:block.

Javascript

Langkah terakhir adalah penambahan javascript, kita telah menambahkan tombol close namun tombol tersebut tidak dapat berfungsi sebagaimana mestinya karena HTML dan CSS tidak mempunyai kemampuan untuk hal tersebut. Dengan bantuan javascriptlah kita dapat memecahkan masalah tersebut.

Selanjutnya sederhana saja, ketika tombol close diklik, kita akan menyembunyikan overlaynya.

$(document).ready(function(){
  $(".close-button").click(function(e){
    e.preventDefault();
    $(".overlay").fadeOut();
  });
});

Penjelasan :

$(document).ready(function(){ ...}); memastikan bahwa script di dalamnya akan dijalankan hanya jika halaman web telah di load sepenuhnya. Selanjutnya saya berikan event listener click pada .close-button dengan $(".close-button").click(function(e){ ... });, Jadi script yang ada di dalamnya akan dijalankan hanya jika .close-button diklik, simpel bukan?.

Karena perilaku dasar dari link ketika diklik adalah membuka halaman web yang terdapat dalam atribut href, maka pertama-tama saya nonaktifkan perilaku tersebut dengan e.preventDefault();. Sebenarnya script ini tidak diperlukan jika tombol yang kita buat menggunakan div. namun karena kita menggunakan link (anchor), maka script ini diperlukan.

Terakhir adalah aksi yang akan dilakukan ketika tombol close di klik. Ketika diklik maka saya sembunyikan div overlay dengan efek fadeout : $("overlay").fadeOut();

Reference & Source : exploit.linuxsec.org, www.ariona.net

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *