Jendela Popup Anti-block – Santika Studio

Selamat pagi Sobat Sandio! Pagi ini kami ingin berbagi sedikit trik untuk membuat popup. Sesuai dengan namanya, pop-up window adalah jendela browser yang terbuka di depan jendela browser utama. Fitur popup sering dipergunakan untuk menampilkan iklan-iklan yang kerap kali mengganggu pandangan. Untuk itu, sebagian besar browser hadir dilengkapi dengan Popup Blocker yang akan menghalangi keluarnya popup semacam itu.

Tapi coba bayangkan, bagaimana jika Sobat menggunakan popup untuk menampilkan menu tertentu namun dihalangi oleh popup blocker. Hal tersebut tentu akan sangat mengesalkan karena pengguna menjadi tidak dapat mengakses menu tersebut.

Lalu bagaimana cara untuk menghindari hal semacam ini? Adakah fitur popup yang anti-block? Atau mungkin popup yang inpage dalam dokumen?

Jawabannya ada! Kita akan manfaatkan kemampuan yang dimiliki oleh JQuery untuk melakukan hal tersebut.

Sebelum memulai, mari menyiapkan piranti yang dibutuhkan. Ada 3 piranti pokok yang harus dipersiapkan jika ingin bermain dengan JQuery, yaitu:

JQuery libraries yang dapat di unduh » di sini «
Browser dengan Javascript enabled
Sebuah halaman html

Saatnya beraksi…

Berikut kami berikan contoh halaman yang akan memuat popup:

<html>
<head>
<title>Bikin Popup Inpage</title>
<style>
body{background:#FFFFFF; color:#000000; margin:0; padding:0;}

/* CSS UNTUK JENDELA POPUP */
#popup_full{
 position:fixed;
 z-index:1000;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:#999999;
 filter:alpha(opacity=70);
 opacity:0.7;
}
#popup_centering {
 position:fixed;
 z-index:1001;
 top:0;
 left:0;
 right:0;
 bottom:0;
}
#popup_wraper{
 margin:0 auto;
 z-index:1002;
 position:relative;
 padding-bottom:25px;
}
#popup_frame{
 position:relative;
 margin:0;
 padding:0;
 border:2px #000 solid;
 border-top:none;
 background:#E4FFDF;
}
#popup_header{
 height:25px;
 width:100%;
 position:relative;
 border:2px #000 solid;
 border-bottom:none;
 text-align:left;
 background:#009900;
 font-weight:600;
 color:#fff;
}
.popup_title{
 float:left;
 padding-left:10px;
 line-height:25px;
}
.popup_close{
 float:right;
 padding:0 10px 0 10px;
 background:#A60004;
 color:#FFFFFF;
 line-height:25px;
 cursor:pointer;
}
/* ======================= */

</style>
</head>

<body>

<!-- MULAI AREA POPUP -->
<div id="popup_full"></div>
<table width="100%" height="100%" border="0" align="center"
cellpadding="0" cellspacing="0" id="popup_centering"></table>
<!-- AKHRIR AREA POPUP -->

</body>
</html>

Skrip di atas adalah penyediaan tempat bagi popup kita. Disertakan pula CSS yang mengatur posisi dari popup kita nantinya. Setelah mempersiapkan tempat, saatnya mengisi tempat tersebut. Namun sebelum mulai memberikan skrip, jangan lupa untuk meng-compile JQuery libraries yang telah didownload sebelumnya (letakkaan di dalam tag <head></head>):

<script src="nama_file"></script>

Ganti nama_file sesuai dengan lokasi JQuery libraries yang Sobat unduh, misalkan “jquery-1.6.4.js”

Setelah libraries ter-compile dalam halaman, masukkan javascript berikut pada bagian paling bawah halaman sebelum </body>

<script>

// SEMBUNYIKAN ELEMENT DENGAN ID TERSEBUT DI BAWAH
$("#popup_full").hide();
$("#popup_centering").hide();

// FUNGSI MENUTUP POPUP
function closeme() {
 $("#popup_full").hide();
 $("#popup_centering").hide();
 document.getElementById('popup_centering').innerHTML='';
 };

//FUNGSI MEMBUKA POPUP 
function popmeup(u,w,h,t){
 $("#popup_full").show();       // TAMPILKAN BACKGROUND
 $("#popup_centering").show();  // TAMPILKAN CONTAINER

var a = '<tr><td align="center" valign="middle">';
var b = '<div id="popup_wraper" style="width:'+w+'; height:'+h+';">';
var c = '<div id="popup_header"><span class="popup_title">'+t+'</span>';
var d = '<span class="popup_close" onclick="closeme();">Close</span></div>';
var e = '<iframe width="100%" height="100%" frameborder="0" src="'+u+'" ';
var f = 'scrolling="auto" id="popup_frame"></iframe></div></td></tr>';
var showme = a+b+c+d+e+f;

document.getElementById('popup_centering').innerHTML=showme;
};

</script>

Langkah kita masih belum selesai sampai di sini. Setelah kita mempersiapkan tempat, css, dan script penggerak; saatnya meletakkan “pemicu” agar popup muncul. Popup ini akan muncul ketika fungsi popmeup() dipanggil. Untuk memanggil fungsi popmeup() dapat menggunakan dua metode mudah:

Menggunakan Hyperlink (<a>…</a>)

<a href="javascript:popmeup();">text Sobat</a>

Menggunakan DOM Event

<span onclick="popmeup();">text Sobat</span>

Dalam penggunaan DOM Event, dapat pula digunakan pada tag html lain seperti <a> , <div> , <body> , <input> dan lain-lain.

Evet yang dapat digunakan pun beragam, beberapa diantaranya: onclick, ondblclick, onkeydown, onmousedown, onkeypress, onmouseover, dan masih banyak yang lain.

Fungsi popmeup() memiliki 4 buah atribut parameter. Ketika kita hendak memanggil fungsi tersebut, pastikan keempat parameter terisi dengan benar. Urutan dari parameter tersebut adalah url, width, height, title.

Berikut contoh membuka sebuah halaman dalam popup dengan lebar 900px, tinggi 580px, dan judul “Belajar Web”

<a href="#" onclick="popmeup('http://www.santikastudio.net/','900px',
'580px','Santika Studio');">Klik di sini!</a>

Pada project kali ini, kita menggunakan fungsi JQuery show() dan hide() serta beberapa javascript. Secara sederhana, sistim kerja dai popup ini adalah:

Pertama, kita mempersiapkan lahan bagi popup, yaitu div#popup_full dan table#popup_centering.

Kemudian kita memberikan script yang akan menyembunyikan kedua element tersebut ketika halaman di-load.

Ketika kita memicu fungsi popmeup(), maka script akan menampilkan popup sesuai dengan parameter yang diberikan.

Ketika tombol Close ditekan, akan memicu fungsi closeme() yang akan menutup jendela popup

Hasil dari percobaan di atas adalah: » seperti ini «

[Semoga Bermanfaat]

Artikel ini telah mengalami penyesuaian dari versi terdahulu yang dipublikasikan pada blog Belajar Web dengan judul Popup Inpage Anti-block.

Jendela Popup Anti-block

Leave a Reply Cancel reply