Popup Inpage anti-block
Posted by Gora Santika
Sumber Gambar : iphonehelp.in
Selamat pagi saya ucapkan, karena memang posting ini saya buat pagi-pagi (dasar orang kuker). Pagi ini saya ingin berbagi sedikit trik untuk membuat popup. Mungkin sodara-sodara sekalian membayangkan popup adalah jendela browser baru yang terbuka, dan berisi iklan-iklan yang gaje. Untuk itu, sebagian besar browser dilengkapi dengan Popup Blocker yang akan menghalangi keluarnya popup macam itu.
Tapi coba bayangkan, ketika kita sedang membuat web dan membutuhkan sebuah tampilan popup untuk sarana menjalankan menu yang tersedia. Misalkan kita memiliki situs toko online. Kita menampilkan daftar barang kita beserta gambarnya. Kita tidak mungkin menuliskan semua detail barang karena akan memakan banyak tempat. Akhirnya digunakan popup sebagai media untuk menampilkan detail barang. Secara simpel, ketika gambar barang diklik, akan tampil popup yang berisi detail barang tersebut.
Praktis, hal itu membuat tampilan halaman menjadi ringkas. Namun apa gerangan terjadi ketika user mengatur browsernya untuk mem-block semua popup dari situs manapun? Tentu detail dari barang tersebut tidak dapat muncul. 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. Seperti yang telah saya sebutkan pada posting sebelumnya, dibutuhkan 3 hal pokok dalam permainan JQuery, yaitu:
- JQuery libraries yang dapat di unduh » di sini «
- Browser dengan Javascript enabled
- Sebuah halaman html
Saatnya beraksi...
Buka teks editor, kemudian copy-paste kode di bawah. Udah kuno ah perintah macam itu. Gini deh, sebenarnya untuk halaman html ini tampilannya bisa disesuaikan denga kebutuhan (semua juga bakalan gitu kalik)--terserah lah. Intinya saya punya contoh macem gini:
<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 untuk popup kita muncul. Disertakan pula CSS yang sedemikian 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 anda 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 anda</a>
Menggunakan DOM Event
<span onclick="popmeup();">text anda</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://jagad-www.blogspot.com/','900px',
'580px','Belajar Web');">Jagad WWW</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]
nice info,thank gan