Saya ingin menunjukkan pesan atau gambar pada kunjungan pertama di website saya atau memberi peringatan bahwa website ini khusus dewasa.
Apa yang harus saya lakukan untuk mewujudkannnya??
Pertama yang harus dilakukan:
- FancyBox jQuery plugin yang bisa Anda dapatkan dari sini: http://fancybox.net/. Saya menggunakan plugin ini sebagai alternatif yang lebih baik untuk plugin Lightbox lama karena mengubah ukuran gambar dimuat dengan ukuran halaman saat ini.
- Cookie jQuery plugin yang bisa Anda peroleh dari sini: http://plugins.jquery.com/project/cookie Yang satu ini saya akan menggunakan untuk mengingat jika modal box(popup) sudah ditampilkan. Saya ingin menunjukkan kotak modal hanya pada kunjungan pertama di situs. Tidak pada setiap buka halaman...
- Oh dan tentu saja jQuery: http://jquery.com/
Oke sudah di download semua sekarang apalagi nih... Oke sekarang kita coba koding javascript pada header php atau html anda..
// loading semua lib scriptKopi paste kode diatas dan letakkan pada header atau antara
// Jika anda menyimpan pada folder js...
<link href="js/fancybox/jquery.fancybox-1.3.1.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="js/jquery.min.js" type="text/javascript">
</script>
<script src="js/fancybox/jquery.mousewheel-3.0.2.pack.js" type="text/javascript">
</script>
<script src="js/fancybox/jquery.fancybox-1.3.1.js" type="text/javascript">
</script>
<script src="js/jquery.cookie.js" type="text/javascript">
</script>
$(document).ready(function(){
/**
* MODAL BOX
*/
// jika cookie diminta tidak memiliki value/nilai maka akan menunjukkan kotak modal
if($.cookie("modal") != 'true')
{
var _message_to_show = '<br />
<h2>
Hi!</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque<br />
<br />
<br />
<a href="http://www.blogger.com/blogger.g?blogID=8104006414729830100#" id="modal_close">ENTER</a> <a href="http://www.google.com/" id="modal_exit">EXIT</a><br />
<br />
';
// Di buka halaman menampilkan kotak modal
// Info lain tentang pilihan yang dapat Anda temukan pada situs fancybox
$.fancybox(
_message_to_show,
{
'width' : 350,
'height' : 300,
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'centerOnScroll' : 'true',
'overlayOpacity' : 0.9,
'overlayColor' : '#000',
'modal' : 'true'
}
);
// Dalam pesan ini adalah link dengan id "modal_close"
// Bila anda klik pada link maka modal akan menutup dan cookie diatur ke "true"
// Path "/" berarti itu aktif untuk root pada situs anda.. jika Anda menetapkan ke "/admin" akan aktif pada folder "admin"
// Berakhir dalam 7 hari
// "Modal" adalah nama pemberian saya untuk set cookie .. Anda bisa nama apapun yang Anda inginkan
$('#modal_close').live('click', function(e) {
e.preventDefault();
$.cookie("modal", "true", { path: '/', expires: 7 });
$.fancybox.close()
});
}
});
<head>Letakkan kode disini</head>Mudah bukan, kini website anda memiliki modal box yang cantik...
Untuk demo silahkan kunjungi fancybox.net sedangkan yang pernah saya buat indobm.com pada bagian adult (saya letakkan jquery fancybox disana untuk memberi warning bahwa website tersebut khusus dewasa dengan cookie yang saya terapkan sekitar 1 hari jadi begitu klik enter, peringatan tidak akan keluar lagi sebelum mencapai 1 hari)...
Kurang mengerti komentar pada FB comment nanti saya akan jawab dengan update artikel...