|
Tutorial: Pop Up
Cute betul cara boyfriend aku minum air.
Assalamualaikum and annyeonghaseyo! hari ni aku nak share satu tutorial; pop up. tahu pop up kan? tuto ni kena ikut dengan teliti, baru menjadi. kalau nak life preview, click dekat gambar home kat sidebar image tu.
1. Dashboard> template
2. cari code </html>, lepas tu copy codes kat bawah ni dan pastekan kat BAWAH code </html>.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //
Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth )
}).prepend('<a href="#" class="close">
<img src="http://media.tumblr.com/tumblr_m2oadnI6zA1qdlkyg.gif" class="
btn_close" title="Close" alt="Close" /></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
//Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
3. lepas tu cari code </style>, copy code kat bawah dan paste ATAS code </style> tadi.
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: url(URL BACKGROUND);
padding: 20px;
font-family: mv boli;
border: 5px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
4. done? okay, lepas tu copy codes kat bawah ni pulak then paste kat BAWAH code </style>.
<div id="01" class="popup_block">
<Center>
<Center>
PUT ANYTHING HERE!</center>
</div>
5. Okay, next copy code kat bawah ni and letak lah kat bahagian navigation korang, tak pun letak kat sidebar image macam aku punya tu.
<a href="#?w=500" rel="01" class="poplight"title="">TITLE</a>
green: URL icon untuk bahagian 'close'. yang aku bagi tu bentuk love sama macam aku
pink: URL background untuk pop up
red: Put anything there such as your rules, linkies and etc.
aqua: Title
Siap! kalau korang nak tambah lagi, salin yang nombor 4 tu dan paste kat bawah code tu sendiri, lepas tu salin yang nombor 5 dan letak kat bahagian-bahagian yang korang nak. TAPI, ada tengok <div id="01" tu? kalau nak tambah, tkar lah kepada 02, 03 04 etc. actually yang itu ialah DIV ID Class korang. jangan lupa pulak nak letak kat nombor 4 dan 5 tu. div id class tu mesti sama. selamat mencuba. Annyeong!
Labels: exo, tutorials
| 
Post a Comment