Jumat, 05 November 2010

Popup Gaya With jQuery

Untuk bergaya-gaya sobat mesti baca artikel satu ini TestKing :-bd Kalau yang suka dengan blog dofollow maka postingan directories karya salah satu sobat kita ini bisa sobat pertimbangkan MyFundoo-Blog :D Sobat sudah baca artikel mengenai popup versi master Abdul Gamal faceblog!!! Setelah dipikir-pikir ternyata popup banyak kegunaannya sob :D Disamping menghemat tempat, yang tidak kalah itu yaaa jadi full stylish ;)) :)) Sekarang Beben si bloglang ganteng kalem tea akan berbagi bagaimana cara membuat popup versi jQuery plug-in :D

Oh iyah, seperti biasa nih sob, karena plug-in maka sobat harus sudah memiliki jQuery script yah :D<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>Kalau sudah ada jangan dipakai lagi yah ;)) Kemon bekicot lets cek gi dot...

Script Plug-in

Letakan script ini didalam bagian tag <head> template sobat. Dalam demo ada 3 jenis popup, disini Beben hanya akan memakai demo yang pertama saja yah sob :D
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {

// Here we will write a function when link click under class popup
$('a.popup').click(function() {


// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');


// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();


// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();


// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});


// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {


// Add markup ids of all custom popup box here
$('#fade , #popuprel').fadeOut()
return false;
});
});
//]]>
</script>

Kode CSS

Sudah tahu dong dimana ini diletakan dimana!!! yes betul sekali sob, letakan diatas/sebelum kode ]]></b:skin>
.popupbox {
width:500px;
height:300px;
background-image:url(http://webdesignersdesk.com/demo/custompopup/images/pop-up_03.png);
background-repeat:no-repeat;
display: none; /* Hidden as default */
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
#fade {
display: none; /* Hidden as default */
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
Hosting gambar background tersebut (kode warna merah) kalau bisa edit-edit sendiri deh sesuai keperluan kode CSS mah yah ;)) Ini yang perlu diperhatikan nih sob, letakan kode HTML ini diatas tag </body><div id="fade"></div>Ketika mau memakai dalam postingan maka sobat bisa menggunakan syntax sebagai berikut
<a href="#" rel="popuprel" class="popup">Click Here for Custom Model Window</a>
<div class="popupbox" id="popuprel">
YOUR CONTENT HERE
</div>
Click Here for Demo
Happy gaya and popup la yaw \m/

Tidak ada komentar:

Posting Komentar